CSS opacity属性

介绍

opacity是CSS3中用来控制元素透明度的一个属性。透明度是指看起来一个元素有多透明，透明度越高越透明，透明度越低越不透明。通过设置元素的透明度，可以让元素看起来更有层次感，也可以让文字更加易读。

语法

opacity属性有一个数值作为它的值，取值范围为0到1，数值越小，元素就越透明，数值越大，元素就越不透明。具体语法如下：

opacity: <number>;

示例

实现半透明效果

通过设置元素的透明度，可以让元素呈现半透明的效果。例如，以下代码实现一个矩形带有半透明的背景色：

<div class="box">半透明矩形背景</div>

.box {
  background-color: #007acc;
  opacity: 0.5;
  color: #fff;
  padding: 10px;
}

实现毛玻璃效果

通过嵌套多个元素，并且为它们的背景添加半透明，可以实现毛玻璃效果。例如，以下代码实现一个头像呈现毛玻璃效果：

<div class="avatar">
  <div class="mask"></div>
  <img src="https://i.imgur.com/8fqneQd.png" alt="头像">
</div>

.avatar {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

透明度对子元素的影响

opacity属性并不只是会影响元素自身的透明度，它还会对元素内部的子元素产生影响。例如，以下代码：

<div class="parent">
  <div class="child">子元素</div>
</div>

.parent {
  background-color: #007acc;
  opacity: 0.5;
  padding: 10px;
}

.child {
  background-color: #fff;
  padding: 10px;
  color: #000;
}

虽然.child元素并没有设置opacity属性，但是它的文本还是呈现了半透明的效果，此时半透明的效果并不是我们想要的。想要parent元素半透明而不影响child元素的文本，可以使用rgba函数，它又称为带透明度的颜色值。例如，以下代码：

<div class="parent">
  <div class="child">子元素</div>
</div>

.parent {
  background-color: rgba(0, 122, 204, 0.5);
  padding: 10px;
}

.child {
  background-color: #fff;
  padding: 10px;
  color: #000;
}

这时候，.parent元素将应用一个带有透明度的背景颜色，而.child元素的文本则不再受到透明度影响。这样就实现了想要的效果。

注意事项

由于透明度会影响元素内部所有子元素，因此在设置opacity属性时需要注意。如果你只想要父元素半透明而不影响子元素，可以使用rgba函数。
opacity属性可以继承，如果一个父元素设置了opacity属性，那么它所有的子元素都将受到影响。
如果使用JavaScript或jQuery等工具来动态调整元素的透明度，建议使用rgba函数而不是opacity属性，因为后者在高级浏览器中的实现效率更高。