23

我有几个彼此相邻的,我想用 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。

这可能吗?

4

6 回答 6

14

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

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

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

opacity: 0.5

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

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

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

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

如果您确实想让事情变得更简单而不是过度复杂化,那么您猜想您将不得不接受这是不可能的。

于 2012-08-31T13:48:41.377 回答
13

如果你有 Sass:

background-color: rgba(white, 0.5);
于 2018-04-27T10:04:27.780 回答
12

如果你想使用现代 CSS:

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

但是仍然不可能将 alpha 添加到给定的颜色,如“其他一些样式表在 RGB、Hex 或其他东西中应用了这种颜色”。

于 2018-05-12T14:03:25.100 回答
7

您可以使用 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);
}
于 2019-08-20T15:41:10.557 回答
5

可以使用 JavaScript 完成,如下所示:

adjustHexOpacity (color, opacity) {
  const r = parseInt(color.slice(1, 3), 16);
  const g = parseInt(color.slice(3, 5), 16);
  const b = parseInt(color.slice(5, 7), 16);

  return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')';

}

于 2016-10-12T20:49:22.367 回答
2

没有任何方法可以做到这一点,值的过度重复是 CSS 的失败之一。

因此,如果您的标准颜色是,rgba(0,0,0,1);那么您将需要rgba(0,0,0,0.5);透明版本。

你也许可以用一点 javascript 来做类似这个客户端的事情,但这并不完全干净。

于 2012-08-31T13:56:04.840 回答