目前我了解的透明度有4种分别是:rgba,opacity,filter,transparent
- 第一种:rgba(0,0,0,0.2);
—最后面的参数是透明度的参数:0~1;(1表示不透明,0表示完全透)
background:rgba(255,255,255,0.5);
border: 1px solide rgba(255,255,255,0.5);
color:rgba(255,255,255,0.5);
box-shadow:10px 10px rgba();
……
优点:
1、它可以给任意颜色设置透明度
2、它设置透明度是不会被继承的,就不用考虑继承问题
缺点:
有兼容问题,支持ie9及以上浏览器
- 第二种:opacity:0.5;
—参数是0~1;(1表示全透,0表示不透)
background:black;
opacity:0.5;
缺点:
设置opacity属性后它的后代元素会随着一起具有透明度
它适应于调整图片或者模块整体透明度
<div class="father" style="background:red opacity=0.5;">
<p>背景文字一起透明</p>
</div>
- 第三种:filter:50;//滤镜这里用的是他的透明度
----从字面意思是滤镜,官方定义filter属性定义元素(一般是img)模糊与饱和度,差不多就是照相时候的滤镜,加了它就有不同的效果
他的属性有很多
filter:none|blur()-模糊|brightness()-亮度|contrast()-对比度|drop-shadow()-阴影|
grayscale()-灰度|hue-rotate()-色相旋转|invert()旋转|opacity()-透明度|saturate()-饱和度|
sepia()-褐色(复古照片感觉)|url();
—参数:0~100
.father{
background:red;
filter:Alpha(opacity=50);
}
- 第四种:transparent;
-他其实就是rgba:(0,0,0,0)表示全透明黑色
background:transparent;
应用场景:
如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的branckground设置为transparent