Question

我想用不透明度定义颜色我知道可以通过rgba颜色来做到这一点，但我喜欢命名颜色的易用性。 e.g：

background-color: red;

有没有办法将两者结合起来？

Answer 1

您不能在rgba(red,0.5)中使用标准CSS中的“红色”，但您可以

background: red;
opacity: 0.5;

缺点是不透明度会影响子元素，rgba(255,0,0,0.5)不会。

通过使用伪元素，您可以创建类似的效果。

div {
  position: relative;
  height: 30px;
}
div:first-child {
  background: rgba(255,0,0,0.5);
  margin-bottom: 10px;
}
div ~ div:before {
  content: ' ';
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;
  background: red;
  opacity: 0.5;
  z-index: -1;
}

<div>Hello</div>
<div>Hello</div>

Answer 2

唯一的方法是分别应用颜色和不透明度：

someElement {
   background: blue; 
   opacity: .5;
}

但是，由于不透明度适用于整个元素，而不是元素的任何一个方面，因此无法选择性地执行此操作。在这里，您将看到背景颜色和字体颜色都受到影响。

div { background: yellow; 
      color:green;
      opacity: .5;
}

<div>This is my div</div>

Answer 3

我担心你不能。 css3规范中没有命名的alpha通道颜色。

您可以在中阅读更多相关信息 https://drafts.csswg.org/css-color-3/#colorunits

如果你想要的是要有一个应用于背景的nemonic，可能最好是为此创建一个类：

.red-50 {
    background-color: rgba(255, 0, 0, 0.5);
}

.red-75 {
    background-color: rgba(255, 0, 0, 0.75);
}

并适用于您的HTML元素

<div class="red-50 someOtherClass"></div>

Answer 4

否......这在原始CSS中是不可能的。

然而，

CSS预处理器可以做到这一点

<强> SASS

div {
  width: 100px;
  height: 100px;
  background-color: rgba(red,0.5);
}

编译到

<强> CSS

div {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.5);
}

SASSMeister Demo

Answer 5

CSS3 rgba()和hsla()函数是直接指定alpha颜色的唯一方法。但是，如果允许使用less或SASS，则可以将颜色分配给变量，并使用与内置命名颜色类似的颜色。一个较少的例子：

@red50: rgba(255, 0, 0, 0.5);

.something {
    background-color: @red50;
}

CSS命名为rgba colors

5 个答案: