将Alpha通道添加到给定颜色

Question

我有几个彼此相邻,我想用CSS设计风格.我想为背景应用各种各样的颜色,但我希望较低的颜色与不透明度降低相同,所以我想到了这个:

span.foo{
    background-color: rgba(0,0,0,1); /*or whatever*/
    color:white;
}

span.foo:last-child{
    background-color: rgba(*,*,*,0.5); /*just an example*/
}

所以我想改变已经定义的背景的不透明度,而不是仅仅通过使用CSS3来影响文本的不透明度.

这可能吗？

Answer 1

如果你有 Sass：

background-color: rgba(white, 0.5);

Answer 2

我相信没有办法做到这一点.

Css本身非常有限,你可以用它做很多事情.

您可以添加不透明度的唯一方法是:

opacity: 0.5

但上述内容也会影响文本本身,而不仅仅是背景.

但是,您可以将背景块与文本分开的方式进行包装,这样可以保持文本的颜色不变.

编辑:看小提琴:http://jsfiddle.net/YfSn7/30/

但这可能看起来有点荒谬,所以我不会建议使用它.

猜猜你必须接受这是不可能的,如果你真的想让事情变得简单而不是过于复杂.

Answer 3

如果你想使用现代 CSS：

--color_rgb: 0, 0, 0;
background-color: rgba(var(--color_rgb), 0.5));

但是仍然无法为给定的颜色添加 alpha ，如“其他一些样式表在 RGB、Hex 或其他颜色中应用了这种颜色”。

Answer 4

您可以使用 CSS 变量：

span.foo {
    --background-color: 0, 0, 0;
    background-color: rgba(var(--background-color), 1);
    color: white;
}

span.foo:last-child {
    background-color: rgba(var(--background-color), 0.5);
}