分离背景颜色和不透明度？

Question

有没有办法在一个地方设置一个元素的bg颜色,并在其他地方操纵它的不透明度？

我知道这可以通过透明的PNG或一些堆叠的DIV来完成,但我不能使用这些选项(请不要浪费时间建议它们).

CSS文件A.

#menubar {
background-color: #036564;
}

CSS文件B.

#menubar {
background-color-opacity: 0.5; /* idea 1 */
background-color: rgba(inherit, inherit, inherit, 0.5); /* idea 2 */
}

Answer 1

目前无法指定部分颜色组件,并且其余值在CSS中继承或级联.

如果你需要指定用alpha值的颜色,你必须与阿尔法提供了RGB或HSL值加在一起,作为唯一的颜色值,允许您指定alpha分量的rgba()和hsla().您不能独立于其他颜色组件指定alpha.

有关详细信息,请参阅CSS3颜色模块.

Answer 2

如果您使用 Sass，您可以为 rgb 颜色定义一个变量，然后将其插入到 rgba 颜色中，仅指定 alpha 透明度分量。

$base-color: rgb(200,150,100);

a {
  color: rgba( $base-color, .7 );
}