CSS颜色名称+ alpha透明度

Question

是否可以通过名称加上Alpha透明度值来定义CSS中的颜色？

即：

#mytext { color: red 0.5 }

而不是诉诸于

之类的rgba

#mytext { color: rgba(255,0,0,0.5) }

Answer 1

没有。 CSS规范仅允许通过名称，RGB的十六进制表示或使用rgb(r,g,b)和rgba(r,g,b,a)函数指定颜色。每次使用都是互相排斥的。

参考：http://www.w3.org/TR/CSS2/syndata.html#value-def-color

现在，颜色名称与CSS1.x时代相比不太有用，因为命名颜色（orange除外）都是旧“16色”显示调色板的成员今天看起来很难看。

如果您想使用颜色名称来提高可读性，请使用注释，如下所示：

color: rgb(0,0,0); /* black */

（将分数放在分号后面，因为许多CSS编辑只有当它们位于属性声明之外时才会保留注释。）

CSS3添加了更多的命名颜色，包括24位X11颜色集以及hsl(h,s,l)函数，但仍然不允许混合使用命名颜色和不透明度值：http://www.w3.org/TR/css3-color/

Answer 2

您可以通过这种方式实现您想要的结果：

#mytext{
  color: red;
  opacity: 0.5;
}

请注意，不透明度会影响整个元素，而不仅仅是文本，因此，例如，如果#mytext元素具有背景颜色，那么也会收到不透明度值0.5

但是，我同意戴，使用颜色名称代替十六进制或rgb代码不是你应该依赖的东西。这是一个难以理解的调色板。

Answer 3

试试这个：

background-color: rgba($scssNamedColor, 0.5);