分别更改背景颜色和不透明度

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，因为允许您指定alpha分量的唯一颜色值为rgba()和hsla()。您不能独立于其他颜色组件指定alpha。

有关详细信息，请参阅CSS3 Color Module。

Answer 2

如果您使用Sass，您可以为rgb颜色定义变量，然后将其插入rgba颜色，仅指定Alpha透明度组件。

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

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

在https://robots.thoughtbot.com/controlling-color-with-sass-color-functions

上找到

Answer 3

您实际上可以拆分两个：background-color和opacity，但在这种情况下，opacity将应用于整个元素而不仅仅是背景颜色。

http://jsfiddle.net/tUHdv/

在jsfiddle示例中，请注意蓝色方块中的字母是如何变为略微红色。

注意：添加此答案是为了说明您可以同时使用这两个属性，但它会影响background-color以上。

Answer 4

分别更改背景颜色和不透明度

这是我们的场景：我们有一些元素要与CSS分别更改背景颜色和不透明度：

div {
  width: 200px;
  height: 150px;
  background-color: rgb(120, 200, 200);
}

<div>
  This element has a background color... We want to change the background color and opacity separately, but without changing the opacity of this text.
</div>

opacity: 0.5;浮现在脑海，但是当我们尝试它时，我们注意到元素内容也变得部分透明。那不是我们想要的：

div {
  width: 200px;
  height: 150px;
  background-color: rgb(120, 200, 200);
  opacity: 0.5;
}

<div>
  This element has a background color... We want to change the background color and opacity separately, but without changing the opacity of this text.
</div>

使用伪元素

我们可以在div中插入一个伪元素，正确定位和调整其大小，然后在其上设置背景颜色和不透明度：

div {
  width: 200px;
  height: 150px;
}

div::before {
  content: " ";
  display: block;
  width: 200px;
  height: 150px;
  position: absolute;
  z-index: -1; 

  /* The magic is here! */
  background-color: rgb(120, 200, 200);
  opacity: 0.5;
}

<div>
  This element has a background color... We want to change the background color and opacity separately, but without changing the opacity of this text.
</div>

当然，这只是一种解决方法。但是在许多情况下，这可以帮助您实现所需的目标。

我们真正需要的是一些精美的CSS函数来处理颜色，以便我们能够做到：

div {
  --bg: rgb(120,200,200);
  --alpha: 0.5;

  background: rgba(r(--bg), g(--bg), b(--bg), var(--alpha));
}

但是，A，它还不存在。

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

4 个答案:

分别更改背景颜色和不透明度

使用伪元素