CSS的透明度处理

目前我总结的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，那么其后代元素都会受其影响.