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具有继承性,既作用于元素本身,也会使元素内的所有子元素具有透明度