影响顶部 div 不透明度而不影响 childrne - CSS

在Web开发中，我们经常需要设置一个顶部div元素的背景色和不透明度，但是我们又不希望这个不透明度影响到这个div的子元素。

解决方案

我们可以使用CSS3中的rgba()函数来实现这一目的。该函数可以设置一个颜色，同时也可以设置一个透明度值。比如我们可以使用以下代码来设置一个不透明度为70%的红色背景：

div.top {
  background-color: rgba(255, 0, 0, 0.7);
}

这个代码片段中，rgba()函数的第一个参数是红色的色值，第二个参数是绿色的色值，第三个参数是蓝色的色值，最后一个参数是透明度，取值范围为0到1。

现在顶部div的背景色是红色，不透明度为70%。但是这个不透明度不会影响到这个div的子元素，因为子元素的透明度不受父元素的不透明度影响。如果子元素也需要一定的透明度，可以在子元素上再应用透明度，如下所示：

div.child {
  background-color: white;
  opacity: 0.8;
}

这里的opacity属性设置子元素的不透明度为80%。

总结

使用rgba()函数可以很方便地实现一个带有不透明度的背景色，并且不影响它的子元素。在需要自定义不透明度时可以使用这个函数。