26

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

IE：

#mytext { color: red 0.5 }

而不是像求助于 rgba

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

4 回答 4

19

不可以。截至 2020 年，CS​​S 颜色规范仅允许将颜色指定为：

  • 命名颜色
    • 有一组基于 4 位颜色系统的 16 种颜色。这一套非常有限，今天看起来很难看。
    • CSS2 添加了 X11+SVG 命名颜色，这些颜色更漂亮，但不允许您指定与颜色相关的不透明度值。
    • 还有一个名为“系统颜色”的名称，但这些已被弃用，因为现代操作系统不再倾向于为 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 -颜色/

于 2013-01-24T02:07:37.290 回答
3

您可以通过这种方式获得您想要的结果：

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

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

但是，我同意 Dai 的观点，使用颜色名称而不是 hex 或 rgb 代码不是你应该过分依赖的东西。这是一个丑陋的调色板。

于 2013-01-24T11:13:03.933 回答
0

不

虽然 sass 中有这样的方法，但更喜欢转换为十六进制数字/rgb，然后相应地添加 alpha

于 2022-01-28T13:12:18.823 回答
-1

试试这样：

background-color: rgba($scssNamedColor, 0.5);
于 2021-06-09T08:24:43.733 回答