CSS-设置元素的不透明样式，设置背景半透明效果的几种方法

朴灿烈づ我的快乐病毒、 2023-06-07 12:20 116阅读 0赞

`opacity` 用于设置元素的不透明度，属性值的范围 0 到 1 之间；0 表示完全透明，1 表示完全不透明，想要设置半透明的效果将其值设置为 0.5 即可，在实际开发中一般 0 可以省略直接设置为 `.5`

示例：

.box { 
      width: 200px;
      height: 200px;
      background: skyblue;
    }

![在这里插入图片描述][2019101511430596.png]

设置背景半透明效果：

.box { 
      width: 200px;
      height: 200px;
      /* 使用 opacity 设置元素半透明会导致元素中的内容都变成半透明 */
      opacity: 0.5;
    }

![在这里插入图片描述][2019101511053054.png]  
背景虽然变成了半透明的效果，但是元素中的内容也受到了影响都变成了半透明

解决办法：

*  可以使用伪元素（别的元素也可以），将伪元素的宽高设置成父元素的宽高，设置其背景色，通过定位与 z-index 属性设置伪元素的堆叠顺序来实现

实现示例：

.box { 
      /* 父元素设置相对定位 */
      position: relative;
      width: 200px;
      height: 200px;
    }
    
    /* 通过伪元素来设置背景半透明，不会影响到其他元素 */
    .box:before { 
      /* 必须设置 content 属性 */
      content: '';
      /* 设置成块级元素才能设置宽高 */
      display: block;
      /* 设置元素的透明度为 半透明 */
      opacity: 0.5;
      /* 子元素设置为绝对定位 */
      position: absolute;
      top: 0;
      left: 0;
      /* 显示在标准元素层级的下面 */
      z-index: -1;
      /* 将宽高设置为父元素的百分之百 */
      width: 100%;
      height: 100%;
      /* 通过伪元素来设置背景色 */
      background: skyblue;
    }

![在这里插入图片描述][20191015114153160.png]  
另一种简单的方法：

*  想要实现元素背景半透明但其中的内容不受影响，可以直接使用 `rgba()` 设置颜色值（IE9 以后支持）

.box { 
      width: 200px;
      height: 200px;
      /* 第四个数值用于设置透明度，范围由 0 到 1，0 表示完全透明，1 表示完全不透明 */
      background: rgba(136, 206, 235, .5);
    }

![在这里插入图片描述][20191015115241910.png]

[2019101511430596.png]: /images/20230601/28770db132b24815801fe91b943cec34.png
[2019101511053054.png]: /images/20230601/231894a407654fe9bf9572526915ff7c.png
[20191015114153160.png]: /images/20230601/12970491b8564a1d9fe354ded17c7401.png
[20191015115241910.png]: /images/20230601/662e9cce51764d19afc5b2c7f4f3704b.png