之前需要做一个弹窗广告,有一个半透明的背景层,然后是广告。很简单的想到了opacity这个属性,设置后发现广告内容也透明化了,背景后面的图案和广告图案重叠,严重影响了视觉效果,如下图所示:
弹窗广告的html内容如下:
<!--弹窗广告-->
<div class="pop_ad_background" style="display: none;">
<div class="pop_ad_container">
<img class="pop_ad_iframe" id="pop_ad_iframe" src="../img/2.jpeg"/>
<a id="pop_close_btn" class="close_img"></a>
</div>
</div>
背景层的CSS内容如下:
.pop_ad_background {
height: 100%;
width: 100%;
opacity: 0.5;
background: #000000;
position: fixed;
top: 0px;
}
弹窗广告容器及广告图片的CSS内容如下:
.pop_ad_container {
position: relative;
top: 65px;
height: 345px;
margin: 0px 12px 0px 12px;
}
#pop_ad_iframe {
height: 100%;
width: 100%;
border: none;
border-radius: 15px;
overflow: hidden;
}
很明显,子元素的透明度继承了父元素的透明度。为子元素单独设置opacity=1也无济于事。
解决方案:
用background-color代替opacity,CSS内容如下:
.pop_ad_background {
height: 100%;
width: 100%;
position: fixed;
top: 0px;
background-color:rgba(0,0,0,0.5);
}
效果如下图所示:
可以看到,背景是透明的,广告内容完全不透明,是我们想要的效果!