1 透明
1.1 rgba() 设置颜色透明度
语法:rgba(R,G,B,A);
RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA
颜色值是 RGB 颜色值的扩展,带有⼀个 alpha 通道 - 它规定了对象的不透明度。
rgba()里的值的介绍:
-
R:红色值。正整数 (0~255)
-
G:绿色值。正整数 (0~255)
-
B:蓝色值。正整数(0~255)
-
A:透明度。取值0~1之间
rgba()只是单纯的可以设置颜色透明度,这样在页面的布局中有很多应⽤。比如说:让背景出现透明效果,但上面的文字不透明。
<style> .box{ width:400px; height:400px; margin: 0 auto; } .box-item{ float:left; width:120px; height:120px; margin:20px } .box-item.item01{ background:rgba(255,0,0,.4) } .box-item.item02{ background:rgba(255,0,0,1) } </style> <div class="box"> <div class="box-item item01">背景透明</div> <div class="box-item item02">背景不透明</div> </div>
1.2 opacity属性设置背景透明度
语法:opacity: value;
value 指定不透明度,从0.0(完全透明)到1.0(完全不透明)。
opacity 属性具有继承性,会使容器中的所有元素都具有透明度;
<style> .box{ width:400px; height:400px; margin: 0 auto; } .box-item{ float:left; width:120px; height:120px; margin:20px; background:#ff0000; } .box-item.item01{ opacity:.4; } .box-item.item02{ opacity:1; } </style> <div class="box"> <div class="box-item item01">背景透明</div> <div class="box-item item02">背景不透明</div> </div>
1.3 总结
-
rgba() 方法与opacity方法可以实现透明度效果
-
rgba()只作用于元素的颜色或其背景色(设置了rgb()透明度元素的子元素不会继承其透明效果)
-
opacity具有继承性,既作用于元素本身,也会使元素内的所有子元素具有透明度