RGBa vs Opacity (特别是BBC Slider)

Question

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

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

.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上使用第一个版本。有人愿意指出为什么一个比另一个更好吗?是否有我不知道的兼容性问题？

Answer 1

所有子项都继承Opacity，但不继承RGBa。如果子项具有较小的不透明度或没有不透明度，请使用RGBa。

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

Answer 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;
}