CSS实现透明度效果的两种方法—— opacity 和 rgba()

在实际开发过程中，为了给用户呈现一些效果，我们需要控制元素的透明度。CSS 提供了 opacity 属性和 rgba() 函数给我们控制透明度，接下来通过一个例子来感受一下两种方法的区别。

<style>
  .transparentBox {
		display: inline-block;
		width: 100px;
		height: 100px;
		margin: 20px;
		color: #FFF;
		text-align: center;
		background-color: rgb(250, 179, 1);
		position: relative;
  }
  .transparentBox > div {
		width: 50px;
		height: 50px;
		line-height: 50px;
		background-color: rgb(210, 105, 30);
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -25px;
		margin-left: -25px;
    }
style>
<div class="transparentBox">
	<div>111div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

opacity 属性

opacity 属性可以设置一个元素的不透明度。语法如下。

opacity: alpha;
alpha 取值范围为 0~1，值越小越透明( 0 表示完全透明，1 表示完全不透明 )，任何一个溢出这个取值区间的值都会被解析为在取值范围内最靠近它的值

IE8 或者更早版本的 IE 浏览器不支持 opacity 属性，若想要在这些浏览器中实现透明效果可以使用 filter 属性，语法格式如下：

filter: alpha(opacity=number);
number 的取值范围为 0~100，值越小则越透明( 0 表示完全透明，100 表示完全不透明 )

为了让所有浏览器都可以实现透明效果，我们可以同时定义 opacity 和 filter 两个属性，如下

div {
	opacity: 0.5;
	filter: alpha(opacity=50);
}
1
2
3
4

下面给最外层盒子设置 opacity 属性，看看有什么效果。

.transparentBox {
	opacity: 0.5;
}
1
2
3

可以看到中间盒子的透明度也被改变了，这也证实了 opacity 属性会影响子元素。此时子元素没有设置 opacity 属性，直接继承了父元素的，所以也是 0.5。如果给子元素也设置 opacity 属性会怎么样？

.transparentBox > div {
	opacity: 1;	/* 依次设为 1、 0.5、 0，观察效果 */
}
1
2
3

子元素 opacity: 1 的效果跟上面是一样的，但是设置比 1 小的值时，子元素有了不同的表现。

由上可知，opacity 属性具有继承性，当它被应用于某个元素上时，这个元素包括它的内容都被当成一个整体看待。一个元素和它的子元素（包括文本、边框、背景色等）都会具有相同的透明度，不过对于它的子元素还有以下两个要点。

1. 子元素会直接继承父元素的透明度。子元素不设置 opacity 时，会受到父元素 opacity 的影响，拥有与父元素相同的透明度。
2. 子元素的透明度是基于父元素的透明度计算的​。子元素 opacity 设为 1 时，父元素的影响依然在，所以在上面的例子中，没有任何变化；设为 0.5 时，相当于在父元素 0.5 的基础上再叠加了一层 0.5 的透明度，看上去更不透明了。

注意：opacity: 0 的元素在页面上肉眼不可见，像是“隐身”了，但 DOM 结构依然存在，所以在页面上仍然占据空间，因此在元素上绑定的事件也能被正常触发。

有时候我们想让子元素摆脱父元素的控制，给父元素单独设置透明度该怎么做？CSS 函数 rgba() 支持这样的做法。

rgba() 函数

rgba() 函数根据颜色的红色、绿色和蓝色成分来表达颜色，可选的 alpha 参数设置颜色的透明度。语法如下。

rgba(r, g, b, alpha)
R、G、B
每个都是从 0 到 255 之间的整数，或从 0% 到 100% 之间的 百分比，或者为关键字 none，分别代表红色、绿色和蓝色的通道。
A 可选
alpha 值（可以是百分比或0~1之间的数字）或者关键字 none，数字 1 对应 100%（完全不透明）。

下面给最外层盒子设置一个带透明度的背景色

.transparentBox {
	background-color: rgba(250, 179, 1, 0.5);
}
1
2
3

可以看到只是最外层盒子的背景颜色改变了，里面的盒子不受影响。有了 rgba() 我们可以更精确地控制颜色和它的透明度，而且不会影响子元素，不像 opacity 属性那样有继承性，对整体都有影响。