你是否能看清这个世界，取决于透明度

最新推荐文章于 2025-12-12 11:10:07 发布

原创最新推荐文章于 2025-12-12 11:10:07 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5 #css3 #前端

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解CSS中的透明度设置，包括opacity属性的使用及其对前景色和背景色的影响，同时介绍如何利用RGBA和HSLA模式单独调整颜色透明度。

书接上文，上回书咱们讲了 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 模式这种，毕竟是目前比较流行的用法。