书接上文，上回书咱们讲了 CSS 里面有关设置颜色值的三种方式。三种方式呢，具体的用法不同、使用的场景可能也不同，但是三种方式咱们都是需要掌握的。尤其是色彩关键字和 RGB 模式这两种，毕竟是目前比较主流的用法。
接下来，咱们来讲一讲颜色世界里面的最后一个内容 - 透明度。没错，你没有看错，就是透明度！之前咱们也不是没有说过它，在说 background-color 属性的默认值时，说是 transparent 就表示透明。
但是，现在咱们要单独地来讲一讲透明度这个内容。
透明度属性
说到透明度呢，在 CSS3 版本里面新增了一个属性，叫做 opacity，就可以用来设置元素的透明度。这个属性的值范围是从 0 到 1 之间的，也就是说：
- 如果这个属性的值为 0 或者 0.0 就表示元素完全透明。也就是说，在 HTML 页面里面你完全看到这个元素了。
- 如果这个属性的值为 0.5 或者 .5 就表示元素是半透明的。
- 如果这个属性的值为 1 或者 1.0 就表示元素是完全不透明的。
知道了上面这三种情况之后，相信你已经想到了 opacity 这个属性的默认值应该是 1。之前咱们已经说了，在 CSS 里面是把颜色分成前景色和背景色的。那这个时候就有个问题出现了，当咱们设置了透明度之后，是影响前景色和背景色，还是只影响其中一种呢？
想要回答这个问题，最好的方式就是通过一个例子来试一试，看看结果就知道了：
<style>
div {
color: gold;
background-color: lightcoral;
}
.light {
opacity: 0.1;
}
.medium {
opacity: 0.5;
}
.heavy {
opacity: 0.9;
}
</style>
<div class="light">这是一个用来测试的div元素.</div>
<div class="medium">这还是一个用来测试的div元素.</div>
<div class="heavy">这也是一个用来测试的div元素.</div>
这个 HTML 页面运行之后的效果是这样的：
结果到底是怎么样的，相信你已经从运行的效果上很清晰的看到了。对，opacity 这个属性不仅影响前景色，也会影响背景色。
颜色值的类型
这时候你可能会想问另一个问题了，就是既然 opacity 这个属性是同时影响前景色和背景色，那是不是我就不能单独只设置前景色或者背景色的透明度了呢？答案是可以单独设置的。
上文书中咱们讲了设置颜色值的方式有三种，其中除了色彩关键字方式以外，还有 RGB 模式和 HSL 模式。其实，CSS3 版本里面不仅新增了 opacity 这个属性和透明度有关，CSS3 版本同时还新增了 RGBA 模式和 HSLA 模式，其中这个 A 就是指透明度了。
也就是说，咱们可以通过 RGBA 模式或者 HSLA 模式来单独设置前景色或者背景色，就像这样做：
<style>
div {
color: rgba(255, 255, 0, 0.5);
background-color: rgba(255, 0, 0, 0.5);
}
</style>
<div>这是一个用来测试的div元素.</div>
这样设置之后，咱们来看看运行后的效果吧：
写在最后的话
看到这儿，说明你已经掌握了怎么来设置前景色和背景色的透明度了。如果咱们想同时设置前景色和背景色的透明度，就选择使用 opacity 属性；如果咱们想单独设置前景色或者背景色的透明度，可以通过 RGBA 模式或者 HSLA 模式来实现。当然了，我还是建议你使用 RGBA 模式这种，毕竟是目前比较流行的用法。