介绍背景图片:,线性渐变(-180度,rgba (20、20、20 0.00), 19%,, # 303030, 100%);
透明度:0.5; & lt; div 类=癱ontainer"比;
,,,& lt; div 类=癱ontent"比;
,,,,,,,& lt; p>我是类为内容的DIV
,,,,,,,& lt; p>我的背景是类为背景的背景& lt;/p>
,,,,,,,& lt; p>通过相对定位和绝对定位,我把类为背景的DIV移动到了我的位置灵活;/p>
,,,,,,,& lt; p>同时通过我的较大的z - index浮在了它的上面只:)& lt;/p>
,,,& lt;/div>
,,,& lt; div 类=癰ackground"祝辞& lt;/div>
& lt;/div> .container {
,,,宽度:,300 px;
,,,身高:,250 px;
,,,颜色:,# fff;
,,,位置:相对;
}
.content {
,,,位置:相对;
,,,z - index: 5;
,,,宽度:,100%;
,,,身高:,100%;
,,,溢出:,隐藏;
}
.background {
background - color,,,,, # 37 a7d7;
,,,位置:绝对;
,,,:0 px;
,,,左:0 px;
,,,宽度:100%;
,,,身高:100%;
,,,z - index: 1;
,,,/*兼容IE7, 8 */,,,,,,-ms-filter:“progid: DXImageTransform.Microsoft.Alpha(不透明度=50)“;
,,,过滤器:,α(不透明度=50);
,,,不透明度:5;
}
这篇“CSS-opacity子元素继承父元素透明度的实现方法”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“CSS-opacity子元素继承父元素透明度的实现方法”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获、下面让我们一起来看看具体内容吧。
<强>分析原因:
父元素背景颜色设置透明度不透明度:0.5,子元素会继承,给子元素设置不透明度:1,子元素的透明度也是在父元素0.5的基础上设置的。
<强>第一种方法:
父元素背景颜色设置透明度时,避免使用背景:# 000;不透明度:0.5,建议使用背景:rgba (0, 0, 0, 0.5)
<强>第二种方法:
如果设置背景色为渐变色等这种复杂背景,第一种方法就不在适用。
,
因为子元素会继承父元素的不透明度属性,我们让它不成为子元素。新增一个子元素,将其绝对定位到父元素位置,然后在该元素上设置背景色与透明度。
感谢你的阅读,希望你对“CSS-opacity子元素继承父元素透明度的实现方法”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注行业资讯频道!
