目前我总结的css透明度处理有三种方式
- transparent
- RGBA
- opacity
Transparent
在css中,transparent代表着全透明的意思,类似于rgba(0,0,0,0)的一个状态。
例如在css属性中定义:background:transparent,意思就代表背景透明。
实际上background默认的颜色就是透明的属性,所以写不写都一样。
transparent 使用场景
如果一个元素覆盖在另一个元素上,想要显示下面的元素,就可以把外层的元素背景设置为transparent。
RGBA
CSS 中的颜色有三种定义方式:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。
RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。
基本语法:
R:红色值。正整数 (0~255)
G:绿色值。正整数 (0~255)
B:蓝色值。正整数(0~255)
A:透明度。取值0~1之间
opacity 设置元素的透明度级别
这三种都是用来实现元素的透明,可是其中也有一些区别,我把rgba说成是制作透明色,opactiy说成制作背景色。
下面我用代码呈现这一区别=============
body代码
<div class="example">
<p>opacity效果</p>
<ul class="ul1">
<li class="opacity1">100%</li>
<li class="opacity2">80%</li>
<li class="opacity3">60%</li>
<li class="opacity4">40%</li>
<li class="opacity5">20%</li>
<li class="opacity6">0</li>
</ul>
<br />
<p>CSS3的rgba效果</p>
<ul class="ul2">
<li class="rgba1">1</li>
<li class="rgba2">0.8</li>
<li class="rgba3">0.6</li>
<li class="rgba4">0.4</li>
<li class="rgba5">0.2</li>
<li class="rgba6">0</li>
</ul>
</div>
opactiy代码
.ul1 li {
background: red;
}
li.opacity1 {
opacity: 1;
}
li.opacity2 {
opacity: 0.8;
}
li.opacity3 {
opacity: 0.6;
}
li.opacity4 {
opacity: 0.4;
}
li.opacity5 {
opacity: 0.2;
}
li.opacity6 {
opacity: 0;
}
rgba代码
li.rgba1 {
background: rgba(255, 0, 0, 1);
}
li.rgba2 {
background: rgba(255, 0, 0, 0.8);
}
li.rgba3 {
background: rgba(255, 0, 0, 0.6);
}
li.rgba4 {
background: rgba(255, 0, 0, 0.4);
}
li.rgba5 {
background: rgba(255, 0, 0, 0.2);
}
li.rgba6 {
background: rgba(255, 0, 0, 0);
}
界面展示
效果中我们可以看出,他们相同之处就是背景色完全是一样的,但是 ul1 后代元素会随着一起具有透明性,所以 ul1 中的字随着透明值下降越来越看不清楚,而 ul2 不具有这样的问题,但是rgba在IE的兼容上不行,支持IE9+。Opacity 能实现透明,而且大多主流浏览器都支持,但是在 IE 下有点麻烦。
从我们上面的实例中我们也知道,RGBA 比元素设置 CSS 的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。
使用 Opacity 来做透明,在父元素中使用了 Opacity,那么其后代元素都会受其影响.