Changing the opacity of background image in css
Question
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;
}
4 answers
solution1
11 ACCPTED 2016-02-27 12:18:02
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; }
solution2
3 2016-02-27 12:13:23
You can try the following workarounds:
1) use an image which already has an alpha channel, such as png;
2) have the background div ad a sibling and not as a parent of the other elements, and change their position with css, such ad position:absolute; z-index; and so on.
3) if your image only consist in colours, you can leave your html untouched and use rgba/css gradients
solution3
1 2016-02-27 12:17:36
You can put the background to a separate <div> :
<body>
<div id="content">
<div id="background-div"></div>
<!-- content -->
</div>
</body>
Then position and style to fill the entire content.
#content {
positon: relative;
}
#background-div {
position: absolute;
width: 100%;
height: 100%
opacity: 0.5;
background: url(...);
}
solution4
-2 2017-01-26 11:14:53
使用直接子选择器主体> .backgroudimg {blah blah}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.