分享程序员开发的那些事...
更新时间：2022-10-19 13:17:11
< HTML> 获取背景图片，而< body> 获得50％透明白色（使用RGBA的透明颜色层）
$ b
html，body {height：100％;填充：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）; / *应用50％透明白色背景* /}
$ b
使用CSS伪选择器
$ b之前 ：在
body
$ b
另一种方法是使用body伪选择器，它可以是实体后面的图层，可以获得 opacity 属性，而不需要影响其他元素。
html，body {height：100％;填充：0; margin：0;} body：before {background：url（https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg）no-repeat center center fixed;显示：块;内容：;位置：绝对;的z-index：-1;顶部：0;左：0;正确：0;身高：100％; opacity：.5;}
I saw some similar questions regarding this. But my approach is different and none of those works to me. That's why I'm posting this. I want to change the opacity of background image without changing the opacity of child elements, where background-image is loaded inside the body tag.
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;
}
<HTML> gets a background image while <body> gets a 50% transparent white (layer of transparent color using 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 for body
Another way is using the pseudo selector for body, which can be a "layer" behind the actual body that can get the opacity property without affecting other elements.
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;
}