明度在网页是一个很重要的属性，非常多的特效都需要控制透明度来完成。控制透明度一共有两种方法。

元素透明度

opacity属性指定了一个元素的透明度，这个透明度不仅会影响本元素，也会影响里面的子元素的透明度。

opacity:数值;

opacity属性取值范围为0.0~1.0，0.0表示完全透明，1.0表示完全不透明（默认值）。

opacity属性取值不可以为负数。

要注意的是，一旦元素设置了Opacity，里面的内容和子元素都会受到影响。如果不透明度的值变高，将使透明元素内部的文本难以阅读。

背景颜色透明度

CSS3还引入了一种新的方法RGBA来指定一种颜色，该颜色包括alpha透明度作为颜色值的一部分。

本质上是改变自身的背景颜色，让背景颜色变得透明，所以不会影响到内容和子元素。

background: rgba(颜色数值,颜色 数值,颜色数值, 透明度);

经典案例

当鼠标指针移到图像上时，图像好像会变亮，这其实是用透明度来控制。

总结

值工具与不透明度。

可以来看一下，比如在这里取了一个颜色，取了这样的紫色，可以在这里去设计软件里面把这个值复制过来，复制了之后在这里去写一下，记得要加一个井号，16进制，这个颜色就会在这里展示出来了。

这个颜色其实可以用vscode自带的调色板工具去切换颜色色值的模式，当点击这里的时候能切换好几种。当去调整透明度的时候会发现后面16进制的多了两位，包括其他的颜色模式也会把它变成a的，加了透明度a字母的模式，RGBA。

这里可以看到这里还有个HWB，这个也是从来没有用过，有兴趣可以自己去研究一下。所以可以点击这里去切换不同的颜色模式，下面的代码的设定也会随之的更改。

当去调整颜色的时候会发现调节的面板颜色就断成了两边，左边这里就是当前调整变成的颜色，右边这里就是调整之前的颜色。如果调完半天之后发现效果不满意，想回到原来那个，可以点击一下就回去了。

有时候如果想用16进制的颜色的写法，但是透明度又感觉不太好设置，其实可以先把它切换为RGBA模式。比如现在一开始这里是16进制的写法，想让它变成20%(不透明度)的颜色，先把鼠标放这里，让颜色色板出现之后先把它转成RGBA的模式，调透明度，调到比如20%的透明度，0.2，再切回去，再切回到这个模式。这个就不就是16进制的带不透明度设置的写法，一个颜色值了。

所以这些小技巧大家都可以去用一下。当然很多时候去给某个颜色设置不透明度相对来说会比较少用，比较常用的去设置不透明度其实很多时候是之前给大家介绍过的，给整个元素用opacity去设置一个不透明度。

比如把它设置到父元素上，不透明度跟颜色的不透明度是有非常大的区别的。不透明度(opacity)是整个元素的整体，包括它的子元素也会受影响的，会看到它整体，包括内部的子元素也好，它的整体变成了很不明显的效果了。

但是颜色的设置只会影响到设置颜色的部分(或者方面)，比如设置不透明度，它只影响到了子元素的背景颜色的不透明度。比如字体，color是给文字设置颜色的，不透明度其实也可以设置，比如把字体的不透明度降到这么低，就会发现字体自己的颜色就会变得不透明度的状态。

比如这里来个red，就明显能感觉到它这些都是对应各自影响的部分去产生作用的。所以有时候如果希望背景颜色有一个不透明度，但是整体的元素不想让它有任何的半透明的效果，就可以通过特定的背景颜色的颜色色值的不透明度的设置达到想要的效果，而不影响到整体的元素。

头条创作挑战赛#

【今日HTML小知识-2：设置颜色透明】在网页布局中有时为了网页的整体美观，可能需要将网页中的某些部分设置为背景颜色透明，那么如何设置背景颜色透明呢？本篇文章就来给大家介绍一下设置背景颜色透明的两种方法。

1、通过backgroud和opacity设置背景颜色透明

background属性中属性值比较简单，这里就不细说了，opacity属性参数的＂不透明度＂是以数字表示，从 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是1.0，换句话说，数字越大代表元素越不透明。代码示例如下：

注意：通过backgroud和opacity设置背景颜色透明度，如果背景上面有文字的话，那么文字也会变成透明，就像上面的效果一样。

2、通过rgba方式设置背景颜色透明

所谓RGBA颜色，就是RGB三原色加ALPHA。在给背景添加颜色的同时，提供透明度特性。

用法：background:rgba(R, G, B, A) ；

代码实例如下：

注意：通过rgba方式设置背景颜色透明度，可以设置背景颜色透明而文字不透明。

以上为HTML设置背景透明色的两种方法，希望能帮助到正在学习HTML的你们噢~~~

新人作者，如有不足地方，希望大家多多交流，随时补充噢~~~