Fork me on GitHub

如何设置父元素透明度但不影响子元素透明度

最近要画一个页面,需要设置父盒子有透明度,但是子盒子没有透明度,王二之前遇到过类似的因此遇到了点麻烦

王二一开始是类似下面这样写的:

1
2
3
4
div.father{
background-color: black;
opacity: 0.75;
}

但是这样写的话,子元素会受到父元素 opacity 的影响,也会有0.5的透明度。这时候哪怕子元素的 opacity 设置为一也没有用,因为子元素的 opacity:1 也是在父元素的 opacity:0.5 的基础上设置的,因此子元素的 opacity 还是0.5。

后来的解决的方法如下:

1
2
3
div.father{
background-color: rgba(255,255,255,0.75);
}
-------------本文结束感谢您的阅读-------------