CSS 颜色名称 + alpha 透明度

Question

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

即:

#mytext { color: red 0.5 }

而不是像 rgba 这样求助

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

Answer 1

没有。截至 2020 年，the CSS Colors specification只允许将颜色指定为:

• 命名颜色
  • There's a set of 16 colors基于 4 位颜色系统。这一套非常有限，今天看起来很难看。
  • CSS2 added X11+SVG named colors它们更漂亮，但不允许您指定与颜色关联的不透明度值。
  • 还有 t he named "System colors"但这些已被弃用，因为现代操作系统不再倾向于为 UI 元素使用单一的简单颜色。
• RGB 颜色使用:
  • 6 位十六进制表示法 (#rrggbb)
  • 3 位十六进制表示法 (#rgb)
  • rgb( r, g, b ) 符号(使用百分比或 0-255 数字)
• RGBA 颜色使用:
  • 8 位十六进制表示法 (#rrggbbaa)
  • rgba( r, g, b, a ) 表示法(注意 CSS4 要求 rgb 接受 4 个参数，但并非所有浏览器都支持)，请注意 a 的范围是 0-1.0 而不是 0-255。
• HSL 和 HSLA 颜色:
  • hsl( h, s, l )
  • hsla( h, s, l, a )

其中每一个都是互斥的。

颜色名称现在不像 CSS1.x 时代那么有用，因为命名的颜色(orange 除外)都是旧的“16 色”显示的成员调色板，今天看起来很丑。

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

color: rgb(0,0,0,0.5); /* semi-transparent black */

(将注释放在分号之后，因为许多 CSS 编辑器只保留位于属性声明之外的注释)。

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