css不让子类继承父类透明度

在 CSS 中，我们可以通过 opacity 属性来设置元素的不透明度。不过有时候我们希望设置一个元素的不透明度，并且不希望它的子元素继承这个不透明度，该怎么做呢？

其实，在 CSS 中，我们还可以使用 rgba() 函数来设置元素的不透明度。与 opacity 属性不同的是，使用 rgba() 函数设置不透明度时，只会影响该元素的背景色和边框颜色，而不会影响它的文本或者子元素的不透明度。

.parent {
  background-color: rgba(0,0.5); // 让父元素背景色半透明
}

.child {
  background-color: #ffffff; // 子元素背景色不透明
}

在上面的代码中，我们将父元素的背景色设置成了不透明度为 50% 的黑色，而子元素的背景色则设置成了不透明的白色。这样一来，就可以实现我们想要的效果。

需要注意的是，在使用 rgba() 函数设置元素背景颜色时，需要将透明度的值放在最后，而不是像 opacity 属性那样放在第一个位置。