opacity属性可以让元素表现为半透明，属性计算值范围是0 ～1，初始值是1.0，没有继承性。
opacity属性还有很多细节知识：
- 在所有支持CSS过渡和动画的CSS属性中，
opacity属性是性能最高的，因此很多动画效果都可以使用opacity属性进行性能优化。例如盒阴影动画效果很耗性能，就可以使用伪元素在元素底部创建一个盒阴影，然后使用opacity属性控制这个伪元素的显示与隐藏，性能会因此提高很多。（4.3节） opacity属性值不为1的元素会创建一个层叠上下文，层叠顺序会变高。因此，如果你希望某个DOM顺序在前的元素覆盖后面的元素，可以试试设置opacity:0.99
# 4.1.1 opacity属性的叠加计算规则
由于opacity属性没有继承性，因此父、子元素同时设置半透明时，半透明效果是叠加的。例如：
.father { opacity: .5; }
.son { opacity: .5; }
1
2
2
此时，子元素的视觉透明度不是0.5，而是一个叠加计算的值，即0.25，没错，就是0.5×0.5的计算值。下面这个例子可以证明这一点：
代码实现
<style>
.father {
width: 120px;
}
.son {
height: 120px;
background: deepskyblue;
}
.opacity1,
.opacity1 .son {
opacity: 0.5;
}
.opacity2 {
opacity: .25;
}
</style>
<div class="father opacity1">
<p class="son"></p>
</div>
<div class="father opacity2">
<p class="son"></p>
</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
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
CSS中半透明颜色和非透明颜色的叠加算法如下：
r = (foreground.r * alpha) + (background.r * (1.0 - alpha));
g = (foreground.g * alpha) + (background.g * (1.0 - alpha));
b = (foreground.b * alpha) + (background.b * (1.0 - alpha));
1
2
3
2
3
例如，deepskyblue的RGB值是rgb(0, 191, 255)，白色的RGB值是rgb(255, 255, 255)，因此25% deepskyblue色值和白色的混合值就是：
r = (0 * 0.25) + (255 * (1.0 - 0.25)) = 191.25 ≈ 191;
g = (191 * 0.25) + (255 * (1.0 - 0.25)) = 239;
b = (255 * 0.25) + (255 * (1.0 - 0.25)) = 255;
1
2
3
2
3
于是，最终呈现的颜色就是rgb(191, 239, 255)，这和图4-1所示的色值完全一致，详见图4-2所示的取色结果。
图4-1 不同半透明值的对比效果示意 </>
图4-2 Photoshop软件中取色结果示意
# 4.1.2 opacity属性的边界特性与应用
opacity属性有一个实用的边界特性，即opacity属性设置的数值大小如果超出0～1的范围限制，最终的计算值是边界值，如下所示
.example {
opacity: -999; /* 解析为 0, 完全透明 */
opacity: -1; /* 解析为 0, 完全透明 */
opacity: 2; /* 解析为 1, 完全不透明 */
opacity: 999; /* 解析为 1, 完全不透明 */
}
1
2
3
4
5
6
2
3
4
5
6
不仅opacity属性有边界特性，RGBA颜色或者HSLA颜色中任意一个颜色通道数值都有边界特性，如下所示：
.example {
color: hsl(0, 0%, -100%); /* 解析为 hsl(0, 0%, 0%), 黑色*/
color: hsl(0, 0%, 200%); /* 解析为 hsl(0, 0%, 100%), 白色*/
}
1
2
3
4
2
3
4
这种边界特性配合CSS变量可以在CSS中实现类似于if...else的逻辑判断，可以用在元素显隐或者色值变化的场景。