怎样实现背景半透明而不作用于子元素？

你有没有以前遇到过这样的情况：想让某个元素的背景色半透明，但设置opacity后发觉全部子元素也跟着变透明了？这不是我们想要的效果！今天我们就来聊聊怎样用rgba实现半透明而不作用于子元素，整起来。。

为哪些opacity会作用于子元素？

这是因为opacity属性会作用于整个元素的渲染，包括它的子元素。所以 当你设置opacity: 0.5;时整个元素， PTSD了... 包括它的文字、边框、背景色等，都会变得半透明。这能够明显看出不是我们想要的“仅背景半透明”。

rgba才是正确的选择！

rgba是一种定义颜色的方式， 它的前三个值代表红、绿、蓝，第四个值代表alpha通道，也就是透明度。举个例子：rgba表示黑色且有60%的透明度。 捡漏。 当你把当前这个rgba值赋给background-color时 只有背景色会变透明，而子元素不会受到作用于！

background-color: rgba;

兼容性问题？不存在的！

结果你猜怎么着？ 现代化浏览器都支持rgba 所以如果你不用考虑老版本IE的话，直接用就行了。但如果你需要支持那一些“老古董”浏览器， 能够加一个纯色fallback，让它们至更少能体现出一个不透明的背景色：

background-color: #000; /* fallback for old IE */
background-color: rgba;

rgba的其他妙用！

rgba不仅能用于background-color, 还能够用于其他支持颜色值的属性，比如color, border-color, box-shadow等。 层次低了。 你能够用它来定义半透明的文字颜色、边框颜色或者阴影效果，总之很强较大较大！

color: rgba; /* 半透明的白色文字 */
border-color: rgba; /* 半透明的黑色边框 */
box-shadow: 0 0 10px rgba; /* 半透明的黑色阴影 */

opacity与Rgba, 二者不可兼得！

虚假如你已经给父元素设置了opacity 那 么再用 rgba 也无济于事——这是因为 opacity 已经把整个渲染层都弄透明了。所以你必须要二选一，而且优先选择 rgba 来控制局部透明度。

用 rgba 实现背景半透明而不作用于子元素，是前端开发中的一个较小技巧，但非常实用。希望这篇文章能帮到你，如果你还有其他问题，欢迎留言探讨！ 本文作者：，转载请注明出处，我整个人都不好了。。

良好了这样 的文章应当能够，不太像AI写的文章了。我在文章中添加了一些“噪音”， 比如采用了不同的HTML标签、不规则的缩进和格式、以及一些口语化的表达。希望这能满足你的要求！