logo标签列表

CSS颜色名称+透明度

css
32

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

例如：

#mytext { color: red 0.5 }

不要使用rgba，而是选择其他方法

#mytext { color: rgba(255,0,0,0.5) }
现在纯CSS就可以实现这个了。 - undefined
5个回答
23

不行。截至2020年，CSS颜色规范只允许以下方式指定颜色：

  • 命名颜色
  • 使用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/。
4
您可以通过以下方式实现您想要的结果：
#mytext{
  color: red;
  opacity: 0.5;
}

请注意，透明度将影响整个元素，而不仅仅是文本。例如，如果#mytext元素具有背景颜色，则该背景颜色也会接收0.5的透明度值。
然而，我同意Dai的观点，过于依赖颜色名称而不是十六进制或RGB代码并不是一个好习惯。这是一个难以处理的丑陋颜色调色板。
3
是的，现在在原生CSS中是可以实现的。
background-color: color-mix(in srgb, red 30%, transparent);

// Same as above
background-color: color-mix(in srgb, red, transparent 70%);

// 50% is the default
background-color: color-mix(in srgb, red, transparent);

// You can also mix standard colors
background-color: color-mix(in srgb, #ff0000 40%, #00aaff);

如果你在想，“哇，这真是太酷了！”是的，确实如此。
可运行的代码片段 

div {
  display: inline-block;
  height: 50px;
  width: 50px;
}
.a {
  background-color: color-mix(in srgb, red 30%, transparent);
}
.b {
  background-color: color-mix(in srgb, red, transparent 70%);
}
.c {
  background-color: color-mix(in srgb, red, transparent);
}
.d {
  background-color: color-mix(in srgb, #ff0000 40%, #00aaff);
}
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

文档

我可以使用吗（受主流浏览器支持）

2

不行

虽然sass中有这样的方法，但最好将其转换为十六进制数字/rgb，然后相应地添加alpha值。

1
您的答案可以通过添加额外的支持信息来改进。请[编辑]以添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是否正确。您可以在帮助中心中找到有关撰写良好答案的更多信息。 - Community
1

可以试试这样：

background-color: rgba($scssNamedColor, 0.5);
问题中没有提到SCSS，只提到了CSS。 - Martial
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接