CSS 中 rgba() 颜色函数的强大功能

我对 CSS 感兴趣的一件事是新的 color-mod 函数。它将使我们能够直接在浏览器中进行颜色操作。例如，当鼠标悬停在按钮上时，您可以使用类似 color: color(black darkness(50%)); 的代码更改颜色，而无需使用任何 CSS 预处理器，例如 Sass。

但是，由于这些 CSS 颜色函数目前的支持度为零，因此我们可以 暂时 使用 PostCSS 并将它们编译为常规颜色。或者，我们可以进行实验并发现 CSS rgba() 颜色函数的强大功能，以便动态更改颜色！让我们看看如何使用它。

工作原理

在设计应用程序中，当我们将黑色和白色方块放置在一个具有蓝色背景颜色的较大方块上（如示例所示）时，结果将分别是较浅和较深的蓝色。

这是因为当降低不透明度时，颜色将根据它是白色还是黑色混合在一起。您能否预测如果我们将蓝色背景更改为绿色会发生什么？您猜对了！

如您所见，通过将背景颜色更改为绿色，小方块现在看起来不同了！我们有浅绿色和深绿色。我们还可以更改不透明度值以选择更深或更浅的颜色。让我们以此基本前提为基础，深入研究一些实际示例。

应用概念

为了使以上示例简洁，我们使用了不透明度。在我们的实际设计中，我们将需要使用 rgba() alpha 值。

.header {
  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
}

我们将在这里使用背景而不是不透明度，因为如果我们使用不透明度值，所有子元素都将受到影响，这不是我们想要实现的目标。如果我们使用 background 属性的 alpha 通道，则可以确保我们只更新要更改的元素。

注意：在演示中，我们将使用 Sass rgba() 函数来加快速度。例如

.elem {
  background: rgba(white, 0.5);
}

将转换为

.elem {
  background: rgba(255, 255, 255, 0.5);
}

网站标题主题

rgba() 的第一个用例是为 Web 应用程序标题设置主题。在 Trello 中，他们正在为标题子元素（徽标、搜索输入、按钮）使用具有 rgba() 的背景颜色。

.search {
  background: rgba(255, 255, 255, 0.5); /* White with 50% alpha */
}

有了它，我们只需更改其背景即可获得为标题设置主题的功能，然后子元素也将随之更改。

在我们的示例中，我们将制作类似于 Trello 标题的内容，并使用开发工具中的背景进行操作。

请注意，两个标题中子元素的背景颜色是不同的。如果我们想检查元素并更改父级背景，我们可以非常轻松地为我们的标题设置主题。

查看 Ahmad Shadeed 在 CodePen 上创建的笔 标题（@shadeed）。

文章标题

在此示例中，使用 rgba() 将有利于

• 顶部和底部的边框。
• 居中包装器的背景颜色。
• 类别链接的背景颜色。

.parent {
  background: #5aaf4c; /* parent background */
  box-shadow: 
    inset 0 8px 0 0 rgba(255, 255, 255, 0.5), 
    inset 0 -8px 0 0 rgba(255, 255, 255, 0.5); /* top and bottom borders */
}

.contain {
  background: rgba(0, 0, 0, 0.1);
}

.category {
  background: rgba(255, 255, 255, 0.5);
}

查看 Ahmad Shadeed 在 CodePen 上创建的笔 文章标题（@shadeed）。

按钮

在为按钮设置主题时，我们可以使用 rgba() 为边框、阴影等创建悬停和焦点效果。

.button {
  background: #026aa7;
  box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
}

.button:hover {
  box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.6), 0 0 8px 0 rgba(0, 0, 0, 0.5);
}

.button:focus {
  box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}

查看 Ahmad Shadeed 在 CodePen 上创建的笔 按钮（@shadeed）。

渐变

另一个有用的用例是添加背景作为纯色，然后使用具有 rgba() 颜色的伪元素作为渐变颜色停止点。

.elem {
  background: green;
}

.elem:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7));
}

这还将使我们能够通过仅更改背景颜色来为渐变设置动画。

.elem {
  /* other styles */
  animation: bg 2s ease-out alternate infinite;
}

@keyframes bg 
  to {
    background: green;
  }
}

查看 Ahmad Shadeed 在 CodePen 上创建的笔 渐变（@shadeed）。

子元素

如果我们在标题元素内有一个导航列表，我们可以向导航添加具有 rgba() 的背景颜色。这将使背景稍微透明，因此它将与父级背景混合。

查看 Ahmad Shadeed 在 CodePen 上创建的笔 子元素（@shadeed）。

同样的方法也可以用于创建动态悬停效果。

查看 Ahmad Shadeed 在 CodePen 上创建的笔 悬停效果（@shadeed）。

颜色调色板的深浅变化

我们可以使用此概念通过在每个颜色框上放置一个具有特定 rgba() 值的伪元素来生成特定颜色调色板的不同色调。

查看 Ahmad Shadeed 在 CodePen 上创建的笔 颜色调色板（@shadeed）。

图像效果

如果我们想使图像更暗或更亮，我们可以使用具有 rgba() 背景的伪元素。

通过使用彩色背景，我们可以创建彩色色调效果。除此之外，我们还可以使用 mix-blend-mode 属性将背景与图像混合，以便获得不同的结果。

在使用 mix-blend-mode 之前，务必检查支持表。

.elem:before {
  background: rgba(0, 0, 0, 1);
  mix-blend-mode: color;
}

如果不支持 mix-blend-mode，图像将变为黑色，用户将无法理解。最好将此类效果作为增强功能来处理，但不要依赖它。为此，您可以使用 @support 或 Modernizr。

@supports (mix-blend-mode: color) {
  /* your enhanced styles go there */
}

查看 Ahmad Shadeed 在 CodePen 上创建的笔 图像（@shadeed）。

使用 CSS 变量进行主题设置

通过在父元素中使用CSS 变量（自定义属性），当变量发生更改时，所有子元素都会受到影响。例如

:root {
  --brand-color: #026aa7;
}

/* Checking for the support of CSS Variables */
@supports (--color: red) {
  .elem {
    background: var(--brand-color);
  }
}

var colors = ["#026aa7", "#5aaf4c", "#00bcd4", "#af4c4c"];
var colorOptions = document.querySelectorAll(".option");
var colorLabels = document.querySelectorAll(".option + label");

for (var i = 0; i < colorOptions.length; i++) {

  /* Add an event listener to each radio button */
  colorOptions[i].addEventListener('click', changeColor);

  /* Add a value to each radio button based on colors[] array */
  colorOptions[i].value = colors[i];

  colorLabels[i].style.background = colors[i];
}

function changeColor(e) {
  /* calling the root element and set the value of a specific property. In our case: --brand-color */
  document.documentElement.style.setProperty('--brand-color', e.target.value);
}

通过结合 CSS 变量和 rgba()，我们可以使我们的布局和颜色更加动态，而无需为每个元素重新定义新的颜色。

查看 CodePen 上 Ahmad Shadeed (@shadeed) 编写的 Pen 标题 - CSS 变量。

需要考虑的事项

备用颜色

尽管 CSS 颜色的全局支持率为97.39%，但为不支持的浏览器提供备用方案非常重要。

.elem {
  background: #fff; 
  background: rgba(255, 255, 255, 0.5); /* non supporting browsers will ignore this declaration */
}

颜色对比检查

我们应该确保元素之间的对比度符合可访问性指南。有时，使用 rgba() 可能会导致难以阅读的糟糕颜色。您可以使用像 Lea Verou 的对比度检查之类的工具来帮助确定颜色是否符合可访问性标准。