CSS给元素div设置透明度的方式

CSS给div设置透明度的方式有多种，根据自己的实际情况做选择

使用opacity

opacity取值是[0,1]之前的小数都可以，直接使用opacity: 0.5，意思是透明度50%，不过这种方式有个问题，就是整个div全部透明了，且div里面的内容（包括文字）也会产生透明：

.my-div {
    opacity: 0.5;
}

如果想要让div里面的内容不透明，可以使用这种方式:

RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

rgba（)里的值的介绍：

R：红色值。正整数（0~255）

G：绿色值。正整数（0~255）

B：蓝色值。正整数（0~255）

A：透明度。取值0~1之间

我们可以把颜色转成rgb的格式，可以用软件或者随便搜索下类似的在线转换网站，例如：https://www.rgbtohex.net/hex-to-rgb/，然后a就是再设置下透明度即可。例如：

.my-div2 {
    background:rgba(255, 0, 0, 0.5);
}