css - RGBa 与不透明度(特别是 BBC slider )

Question

我目前想知道哪个是最好的 CSS 属性，Opacity 还是 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 的第一个版本。有人愿意指出为什么一个比另一个更好吗？如果有任何我不知道的兼容性问题？

Answer 1

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

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