css不影响子元素的透明度

CSS对元素的透明度控制是很方便的，可以通过opacity属性来实现。但是，很多人在使用CSS控制透明度时，遇到了一个问题：设置父元素的透明度，子元素透明度也跟着改变了，这不是我们想要的效果。

父元素的CSS:
    .parent {
        background-color: rgba(255, 0, 0, 0.5);
        opacity: 0.5;
    }
子元素的CSS:
    .child {
        background-color: rgba(0, 255, 0, 0.5);
        opacity: 1;
    } 

如上所示，父元素的透明度被设置为0.5，子元素的透明度被设置为1，但是当我们在浏览器中查看效果时，会发现子元素也有一些透明度，这不是预期的结果。

其实，这是由于CSS的渲染机制导致的。在设置父元素透明度的时候，子元素的透明度也会受影响。这是因为子元素是嵌套在父元素之内的，它们共享相同的背景。如果您希望子元素不受父元素透明度的影响，您可以使用rgba色彩值设置嵌套的子元素。

父元素的CSS:
    .parent {
        background-color: rgba(255, 0, 0, 0.5);
    }
子元素的CSS:
    .child {
        background-color: rgba(0, 255, 0, 0.5);
    } 

如上所示，我们只设置了父元素和子元素的背景色，而没有设置透明度，这样就可以解决透明度叠加的问题。这是因为子元素各自拥有自己的背景，互相独立，所以它们的透明度互相不影响。

总结一下，如果您希望设置父元素的透明度不影响子元素的透明度，您应该使用rgba色彩值设置子元素的背景，而不是opacity属性。