当前位置:首页 >> 技术分享 >> 详情
sousuo
sousuo

3、元素外层半透明,内层也跟着透明的解决办法【网页切图技巧】

上传时间:2020-05-14             浏览次数:71

一、现象

如果需要外层半透明,内层就会跟着变成不透明的。无法实现外层半透明,内层不透明。

二、原因

透明度是向下继承的,无法实现内层不继承,只可以改变架构方式来实现这样的结果。计算内层透明度,是外部透明度和内部透明度相乘,例如外层透明度0.5,内层想写成不透明1,最终得到的结果是透明度0.5。

三、解决办法

方案一:可以用position:absolute,做一上一下的两个平行关系的层

方案二:css3中有rgba可以实现(IE9以上浏览器才支持)

HTML代码

<div class="rgba">1. 这里是父元素半透明子元素不透明的效果<p>我是子元素文字</p></div>

<div class="opacity">2. 这里是父元素半透明子元素也半透明的效果<p>我是子元素</p></div>

CSS代码

body{background-color: red;}
div{width: 300px;height: 200px;color: #fff;}
div.rgba{background-color: rgba(0,0,0,0.7);}
div.opacity{background-color:#000;filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity:0.7;opacity: 0.7;margin-top: 20px;}
0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们