0

我目前想知道哪个是最好的 CSS 属性，不透明度还是 RGBa？更具体地说，我正在尝试重新创建类似于著名的BBC 主页滑块的东西，这让我想到了他们为什么使用 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 的第一个版本。有人愿意指出为什么一个比另一个更好，以及是否有任何我不知道的兼容性问题？

4

2 回答 2

1

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

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

所以假设你有一个div：

<div>Hello!</div>

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

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

而这只会使div50% 不透明的背景，同时将文本保留为 100% 不透明的纯白色：

div {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}
于 2012-12-06T16:05:22.600 回答
1

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

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

于 2012-12-06T15:55:33.513 回答