常见的4种CSS全透明特性详细介绍

日期:2021-01-20 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

以下编码:

拷贝编码
编码以下:

.mask-layer {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
 
上面的几个特性各自是:

拷贝编码
编码以下:

opacity: 0.5; 这是最关键的,由于它是CSS规范.该特性适用Firefox, Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的,可赋值在0⑴00,其它3个0到1.
-moz-opacity:0.5; 这个是以便适用1些老版本号的Mozilla访问器。
-khtml-opacity: 0.5; 这个以便适用1些老版本号的Safari访问器。

 
CSS全透明度承继难题

但CSS的全透明特性涉及到到1个承继难题,当为父级元素设定全透明度后,子元素将全自动承继其全透明度,例如这样的1个实际效果:

 
即便你又为子元素特定全透明度为1也是失效的。
 
针对子元素是文本的状况,我的处理方式1般是假如是多少还可以看清,就无论。另外一个折中的方式是,为文字子元素特定1个相对性更深的色调。也便是说,当子元素承继全透明度后,所获得的文字色调恰好便是你要想的。前提条件是,这个色调也有加深的将会,和必须详尽的测算色调和全透明度的值。
 
也有1种方式便是,全透明层单独出来,以下编码,先.mod设定position:relative;随后.mask-layer设定position:absolute;z-index:1;最终.title设定position:absolute;z-index:2;

拷贝编码
编码以下:

<div class="mod">
<img src="images/QQ截图202.png" alt="" />
<p class="mask-layer"></p>
<p class="title">小清爽,你喜爱吗</p>
</div>