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

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

示例：

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

<div class="box">内容</div>

设置背景半透明效果：

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

<div class="box">内容</div>

背景虽然变成了半透明的效果，但是元素中的内容也受到了影响都变成了半透明

解决办法：

• 可以使用伪元素（别的元素也可以），将伪元素的宽高设置成父元素的宽高，设置其背景色，通过定位与 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;
}

<div class="box">内容</div>

另一种简单的方法：

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

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

<div class="box">内容</div>