在CSS中更改背景图像的不透明度 [英] Changing the opacity of background image in css
问题描述
我想更改背景图片的不透明度，而不更改子元素的不透明度，其中背景图片在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>环聊和LT; /跨度>
< / 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;
}
/ h2>
< 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 Background with BODY filter
<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 */
}
Using CSS pseudo selector :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;
}
这篇关于在CSS中更改背景图像的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
