CSS背景透明文字不透明或者子节点不透明

分类: 文章 • 2022-10-27 08:35:34

先上效果图，如下

. CSS背景透明文字不透明或者子节点不透明

三个列表是透明的，而文字和图标并未透明，实现代码如下

background-color: rgba(255, 255, 255, 0.15);

没错，就这一行代码就OK

背景颜色白色，但是不要使用16进制色，使用rgb色，因为rgb色可以设置透明度——rgb最后一个参数0.15 （如上代码），这样设置的背景色就不会影响子节点和文字的透明度。

千万不要使用 opacity:0.15; 这样实现如图效果就走远了