Lal*_*ath 3 html css html5 css3
我看到了一些类似的问题.但我的方法不同,这些都不适合我.这就是我发布这个的原因.我想改变背景图像的不透明度而不改变子元素的不透明度,其中background-image被加载到body标签内.
HTML:
<body>
<div id = "background-div">
<div class = "header">
<div class = "ham-icon">
<img src = "images/ham-icon.png">
</div>
<div class = "logo">
<span class = "google-logo">Google</span><span class = "hangouts-logo"> Hangouts</span>
</div>
<div class = "profile-data">
</div>
</div>
<div class = "body">
</div>
</div>
</body>
CSS:
body
{
position: relative;
background: url(../images/back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Azi*_*ziz 11
<HTML>获取背景图像,同时<body>获得50%透明白色(使用RGBA透明色层)
html, body {
height:100%;
padding: 0;
margin: 0;
}
html {
background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
}
body {
background:rgba(255,255,255,0.5); /* applies a 50% transparent white background */
}:before的body另一种方法是使用body的伪选择器,它可以是实际主体后面的"层",可以在opacity不影响其他元素的情况下获取属性.
html, body {
height:100%;
padding: 0;
margin: 0;
}
body:before {
background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
display: block; content:""; position: absolute; z-index:-1;
top:0; left: 0; right: 0; height: 100%;
opacity:.5;
}