css不继承父级的透明度

在CSS中，透明度是一个常见的效果，我们可以使用opacity属性设置元素的透明度。然而，CSS中的透明度不会继承父级元素的透明度，这可能会导致一些意想不到的结果。

.parent {
  opacity: 0.5;
}

.child {
  background-color: blue;
  opacity: 0.8;
} 

在这个例子中，我们设置了.parent元素的透明度为0.5，.child元素的透明度为0.8，但是，.child元素并没有继承.parent元素的透明度，最终呈现的颜色并不是我们所期望的半透明蓝色。

所以，如果要让child元素继承parent元素的透明度，我们应该使用rgba来设置元素的颜色值，rgba中的最后一个值代表透明度，这样就可以让child元素继承父级元素的透明度。

.parent {
  opacity: 0.5;
}

.child {
  background-color: rgba(0,0,255,0.8);
} 

在这个例子中，我们使用rgba(0,0,255,0.8)来设置child元素的颜色，其中最后一位值为0.8，代表child元素的透明度，这样就可以继承父级元素的透明度，最终呈现的结果是一种透明度为0.4的蓝色。

需要注意的是，使用rgba来设置元素的颜色值时，除了最后一个值表示透明度外，其他的值都和普通的颜色值一样，例如rgba(255,255,255,0.5)表示的是半透明的白色。