CSS中如何添加Alpha透明度？嵌套元素hover透明度求解

嘿，我来帮你搞定CSS里的Alpha透明度问题，还有你示例里那个悬停状态的Alpha值困惑～

常见的Alpha透明度添加方式 #

CSS里给颜色加透明度主要有这几种常用方法：

• 十六进制颜色后缀法：就是你示例里用的 #RRGGBBAA 格式，最后两位AA就是Alpha值，范围从00（完全透明）到FF（完全不透明）。比如#04B43188里的88就代表约53%的不透明度（计算方式：136/255≈0.53，因为88转十进制是136）。
• rgba()函数：格式是rgba(红, 绿, 蓝, Alpha)，Alpha值是0到1之间的小数，比如rgba(4, 180, 49, 0.53)就和#04B43188效果一样。
• hsla()函数：和rgba类似，只是用色相、饱和度、亮度来定义颜色，格式hsla(色相, 饱和度%, 亮度%, Alpha)，比如hsla(135, 96%, 36%, 0.53)也对应上面的颜色。
• opacity属性：直接给元素加opacity: 0.53，但要注意这个属性会让元素包括它的所有子元素都变透明，而前面几种方法只针对颜色本身，不会影响子元素。

你的示例解析：.example-child:hover的Alpha值计算 #

看你的代码，.example-single:hover用的是#04B431CC（Alpha值CC转十进制是204，对应约80%不透明度），而.example-parent本身已经是#04B43188（Alpha136，约53%不透明），.example-child悬停时要加同色系的透明色，叠加后要和.example-single:hover的视觉效果一致对吧？

这里需要计算叠加后的Alpha值：父元素的Alpha是136/255≈0.53，子元素的Alpha设为x（十进制），叠加后的总Alpha公式是：

总Alpha = 父元素Alpha + 子元素Alpha × (1 - 父元素Alpha/255)

代入总Alpha为204（对应CC）：

204 = 136 + x × (1 - 136/255)

解这个方程：

x = (204 - 136) × (255/119) = 68 × (255/119) ≈ 145.7

转成十六进制就是91（因为145的十六进制是91），所以.example-child:hover的背景色应该写成#04B43191。如果想要更近似的整数，92（146）也可以，视觉差异几乎可以忽略。

另外补充一下：如果用rgba的话，就是rgba(4, 180, 49, 0.57)（因为145.7/255≈0.57）。

内容的提问来源于stack exchange，提问作者ProgrammingMachine5000