我看到了一些类似的问题。但我的方法不同，这些都不适合我。这就是我发布这个的原因。 我想更改背景图像的不透明度而不更改子元素的不透明度，其中 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;
}
最佳答案
带有 BODY 过滤器的 HTML 背景
<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 */
}使用CSS伪选择器:before对于 body
另一种方法是使用 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;
}关于html - 在CSS中更改背景图像的不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35669563/