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

2022-05-14 493点热度 0人点赞 0条评论

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

使用opacity

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

.my-div {
    opacity: 0.5;
}

使用background:rgba(r,g,b,a)

如果想要让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);
}

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论