首页 前端知识 【HTML&CSS】如何设置透明的div盒子?

【HTML&CSS】如何设置透明的div盒子?

2024-01-26 00:01:41 前端知识 前端哥 120 202 我要收藏

有时候我们想把盒子的背景设置成透明的,或者半透明的,看起来更美观。这就需要我们给颜色加一个透明度。

方法一:直接使用‘background:rgba(R,G,B,A)’来设置透明的背景,第四个alpha值代表透明度,范围在0到1之间,0表示完全透明,1表示完全不透明,0.5则为半透明。

以下是效果,我设置的是70%的透明度

方法二:使用‘backgroud:rgba(R,G,B)或background-color’来设置背景颜色,然后用‘opactiy:透明度值’属性,透明度值同alpha一样

方法三:使用background-color:十六进制,在十六进制后面加上以下数字,百分比代表透明度值,对应的透明度数值在这↓↓↓

(记住一定要是十六进制的)

举例子如下:

未设置透明度!!底色为白色↓

 

设置了全透明!!

 

 怎么样对比明显不,设置透明度也可以使用这种方法,不过我觉得不管那种方法达到目的就好了。

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/389.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!