我看到了一些类似的问题。但我的方法不同，这些都不适合我。这就是我发布这个的原因。 我想改变背景图像的不透明度而不改变子元素的不透明度，其中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;
}
答案 0 :(得分：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;
}
答案 1 :(得分：3)
您可以尝试以下解决方法：
1）使用已有alpha通道的图像，例如png;
2）将背景div广告作为兄弟而不是其他元素的父级，并用css改变其位置，例如广告位置：绝对; z索引;等等。
3）如果你的图片只包含颜色，你可以保持你的html不变并使用rgba / css渐变
答案 2 :(得分：1)
您可以将背景设置为单独的<div>：
<body>
<div id="content">
<div id="background-div"></div>
<!-- content -->
</div>
</body>
然后定位和样式以填充整个内容。
#content {
positon: relative;
}
#background-div {
position: absolute;
width: 100%;
height: 100%
opacity: 0.5;
background: url(...);
}
答案 3 :(得分：-1)
使用直接子选择器 身体＆gt; .backgroudimg { 等等等等 }