任何地方的颜色 Alpha | CSS-Tricks

在我的 “自定义属性的不同使用程度” 文章中，我注意到关于颜色和 CSS 自定义属性的一种情况，在那里我将 HSL 颜色值分解得“过头”了。将每个颜色都分解成其 H、S 和 L 部分可能有点过头了。

但是您可能确实希望像这样将其分解

html {
  --color-1-hsl: 200deg 15% 73%;
  --color-1: hsl(var(--color-1-hsl));
}

因此，在您的颜色系统中，每个颜色使用两个自定义属性。为什么？因为现在您有了一种非常简单的方法来使用它，并且如果您需要，还可以使用一种方法将 alpha 应用于颜色。

.card {
  background: var(--color-1);
}
.card-with-alpha {
  background: hsl(var(--color-1-hsl) / 0.5);
}

实际上没有其他方法可以在 CSS 中获取现有颜色并为其应用 alpha 透明度。嗯，我这么说，但实际上…

/* Future CSS! (works in Safari TP right now) */
.card-with-alpha {
  background: hsl(from var(--color-1) h s l / 0.5);
}

这很巧妙，但我并不完全确定我们何时才能在生产环境中依赖它。

您知道我们还不能在生产环境中用于任何非常重要的事情是什么吗？Houdini 绘制工作线程。 Firefox 或 Safari 还没有这些。

有点可惜，因为Dave 几乎已经破解了这个东西！这里需要注意的是，Houdini 绘制工作线程基本上会返回一个使用<canvas> API 绘制的图像。您可以在 Canvas 中使用任何颜色格式绘制一个矩形，然后设置globalAlpha，将其作为图像返回，因此这基本上可以解锁任何颜色格式上的 alpha！它有效（在 Chrome 中）

Dave 将代码放在 GitHub 上并写了博客。当然，它也制作了一个不错的视频

点赞和订阅。

但是，如果您需要在生产环境中使用这样的系统，只需使用我首先列出的自定义属性技术即可。

之前版本的这篇文章被推文轰炸了，但我在这里写博客，因为真正的博主会写博客。

diondiondion

# 2021年11月15日

令我惊讶的是，没有提到原本应该添加到 CSS 中的color-mod() 函数。

因此我查找了一下，并了解到它已从 CSS 颜色级别 4 规范中删除。 :-(

这将使将透明度或其他调整应用于任何现有颜色变得更加简单。

这是我最期待的 CSS 功能之一，希望它能尽快重新进入规范。

但在那之前，hsl(from ...) 解决方案也可以解决问题，我想。

Chris Coyier

评论永久链接# 2021年11月16日

这将使将透明度或其他调整应用于任何现有颜色变得更加简单。

我认为普遍观点是from ... 语法可以执行color-mod() 可以执行的操作，但更灵活？不确定。

Kaspars Z

# 2021年11月16日

您也可以使用 rgba 来应用 alpha，它在所有现代浏览器中都有效

:root {
    --color-rgb: 255 122 24;
}

.element {
    background: rgba(var(--color-rgb), 0.25);
}

当然，在 CSS 中这样编写颜色并不方便，但如果您使用 SASS，则可以使用以下方法将颜色拆分为其组件

$color: #ff7a18;

:root {
    --color-rgb: #{ red($color) } #{ green($color) } #{ blue($color) };
}

.element {
    background: rgba(var(--color-rgb), 0.25);
}

Glenn

评论永久链接# 2021年11月16日
来这里提到这一点。如果我们要走 SASS 路线，以上内容可以简化为
```
$color: $ff7a18;
.element {
  background: rgba($color, 0.25);
}
```
我们在许多网站上使用这种模式。对我来说，混合这样的变量有点奇怪，但我想如果您想动态更改--color-rgb 的值，这可能是一个有用的用例。

Joy

# 2021年11月17日

如果仅用于背景，您可以构造一个具有透明度的渐变以将透明度应用于颜色。诀窍是将渐变线延伸得很远。

假设您希望顶部为 0.25 alpha，底部为 0.35。这是可见渐变范围内 0.1 的变化，在语法上用 100% 表示。总渐变线将是
100/x = 0.1 所以 x=1000
这会给你
background: linear-gradient(to bottom, transparent -250%, var(--color-rgb) 650%);
因此整个渐变线为 1000，但您只能看到从 0 到 100。这就像将“0 到 100”框移动到总线的正确部分以获得所需的 alpha。

评论

发表评论 取消回复

发表评论取消回复