CSS-背景色 background 半透明

柔情只为你懂 2023-08-17 17:29 299阅读 0赞

想要实现背景色的半透明效果可以是将 background 的属性值设置为 rgba()

语法:

  1. background: rgba(0, 0, 0, 0.5);

前三个值(红绿蓝)的范围为0到255之间的整数或者0%到100%之间的百分数;这些值描述了红绿蓝三原色在预期色彩中的量

最后一个参数是 alpha 透明度 取值范围 0~1之间,0.5为半透明

  • rgba(255,255,255,0) 完全透明的白色
  • rgba(0,0,0,1) 完全不透明的黑色
  • rgba(0,0,0,0) 完全透明的黑色(无色)

背景半透明是指盒子背景半透明, 盒子里面的内容不受影响;因为是CSS3 ,所以 低于 ie9 的版本是不支持的

在实际开发中我们习惯把 0.5 的 0 省略掉这样写 background: rgba(0, 0, 0, .5);

发表评论

表情:
评论列表 (有 0 条评论,299人围观)

还没有评论,来说两句吧...

相关阅读

    相关 css透明边框

    核心:背景色会默认延伸到border下层。这里主要使用到background-clip属性,属性值包括border-box(背景延伸至边框外沿,但是在边框下层),padding

    相关 css背景透明

    css设置div背景透明有两种方法:第一种使用opacity:0~1,这个方法有个缺点,就是内容也会跟着透明;第二种方法就是background-color:rgba(0,0,