背景图像不透明度与父背景颜色
问题描述:
CSS: set background image with opacity?的答案使用伪元素:after
描述了很好的背景不透明度修复。但是,如果父分部具有背景颜色,则透明背景图像不再显示,因为它使用了z-index: -1
。我已经尝试了使用这个基本模型的无数解决方法,但无济于事。背景图像不透明度与父背景颜色
以下是示例代码。请注意,没有.locations_30 {background:white}
它很好。
body {
background-color: #fefbed;
color: #444;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
.locations_20 {
position: relative;
}
.locations_20:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: -1;
background-image: url(../background_images/zenrockgarden_mod.jpg);
background-repeat: no-repeat;
left: 0%;
top: 0%;
background-size: 100% 100%;
opacity: 0.27;
}
.locations_30 {
background: white;
width: 800px;
padding: 75px;
} /*parent division with color will overrun z-index: -1*/
<body>
<div class="locations_40">
<div class="locations_30">
<p class="locations_20">
Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following:
etc,,, <br> We are happy to offer the following: etc,,, <br>
</p>
</div>
</div>
</body>
答
如果您更新.locations_20
规则,这样它会工作
.locations_20 {
position: relative;
z-index: 0; /* added */
}
栈片断
注意,由于图像并不在所以这里加载,我加了red
到.location_20
的背景所以我们可以看到它的工作原理
body {
background-color: #fefbed;
color: #444;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
.locations_20 {
position: relative;
z-index: 0; /* added */
}
.locations_20:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: -1;
background-image: url(../background_images/zenrockgarden_mod.jpg);
background-repeat: no-repeat;
left: 0%;
top: 0%;
background-size: 100% 100%;
opacity: 0.27;
background-color: red; /* temp. added so we can see it */
}
.locations_30 {
background: white;
width: 800px;
padding: 75px;
}
<body>
<div class="locations_40">
<div class="locations_30">
<p class="locations_20">
Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following:
etc,,, <br> We are happy to offer the following: etc,,, <br>
</p>
</div>
</div>
</body>