Question

我目前想知道哪个是最好的CSS属性，Opacity或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;
}

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

2 个答案: