RGBa 与不透明度（特别是 BBC 滑块）答案

【问题标题】：RGBa vs Opacity (Specifically BBC Slider)RGBa 与不透明度（特别是 BBC 滑块）
【发布时间】：2012-11-24 16:57:55
【问题描述】：

我目前想知道哪个是最好的 CSS 属性，不透明度还是 RGBa？更具体地说，我正在尝试重新创建类似于著名的 BBC Home page slider 的东西，这让我想到了他们为什么使用 Opacity。

在我的版本中，我遇到过使用以下两个版本的代码：

.left-button {
    background: rgb(255, 255, 255) url('../images/left-arrow.png') no-repeat; //FALLBACK
    background: rgba(255, 255, 255, 0.4) url('../images/left-arrow.png') no-repeat;
}

或

.left-button {
    background: #fff url('../images/left-arrow.png') no-repeat; //FALLBACK
    opacity: 0.4;
}

显然，第二个使实际按钮图像也变得不透明，这就是为什么我认为 BBC 为按钮制作了单独的按钮和背景蒙版（我认为这是不必要的额外标记）。

不过，我想使用带有 RGBa 的第一个版本。有人愿意指出为什么一个比另一个更好，以及是否有任何我不知道的兼容性问题？

【问题讨论】：

标签： css opacity rgba

【解决方案1】：

Opacity 被继承到所有子项，RGBa 不是。如果子项的不透明度较低或没有，请使用 RGBa。

IE8 及更低版本不支持 RGBa，因此您可能需要一个不透明备份计划。

【讨论】：

【解决方案2】：

两者都不是“更好”的，因为它们做的事情不同，所以这取决于你想要完成什么。

opacity 设置整个元素及其所有内容（文本、内嵌图像等）的不透明度。 RGBa 是一种定义具有一定 alpha 透明度的颜色的方法。

假设你有一个div：

<div>Hello!</div>

这将使整个div 及其内容（“Hello！”）50% 不透明：

div {
    background: #000;
    color: #fff;
    opacity: 0.5;
}

而这只会使div 的背景 50% 不透明，而使文本保持 100% 不透明的纯白色：

div {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

【讨论】：