如何在 CSS 中混合颜色？

Question

我有以下代码：

 .reviewed {
  background-color: rgba(228, 225, 219, 1);
}
.deleted {
  background-color: red;
}

 <table>
  <tr>
    <td>№</td>
    <td>Name</td>
  </tr>
  <tr class="reviewed">
    <td>1</td>
    <td>Ivan</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Andrey</td>
  </tr>
</table>

How can I make it so that when both the classes .deleted and .reviewed are set on an element the background-color of .deleted takes into account background-color 的 .reviewed ？

使用这两个类时，颜色应该比仅使用类 .deleted 更暗。

原文由 Vladimir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用的是 CSS 预处理器，例如 SASS/LESS，您可以简单地定义两个颜色变量并使用颜色混合函数生成第三种颜色。

SASS 示例：

 $color1: rgba(228, 225, 219, 1);
$color2: red;

.reviewed {
  background-color: $color1;
}
.deleted {
  background-color: $color2;
}
.reviewed.deleted {
  background-color: mix($color1, $color2);
}

更少的例子

原文由 Salman A 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

`background-blend-mode` 可以让你将两个背景混合在一起

在这种情况下 background-blend-mode: mulitply; 可以为您提供所需的变暗效果 background-color 的 .deleted 。

需要进行以下更改：

• 在 --- 中将 background-color:rgba(228, 225, 219, 1); 更改为 background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1)); .reviewed 。 This will give .reviewed the same background colour but will enable background-blend-mode to work with the background-color set on .deleted
• 添加 background-blend-mode: multiply; 到 .deleted 使背景颜色能够与 .reviewed 上设置的“背景图像”混合

 .reviewed {
  background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1));
}
.deleted {
  background-blend-mode: multiply;
  background-color: red;
}

 <table>
  <tr>
    <td>Number</td>
    <td>Name</td>
  </tr>
  <tr class="reviewed">
    <td>1</td>
    <td>Reviewed</td>
  </tr>
  <tr class="reviewed deleted">
    <td>2</td>
    <td>Reviewed and deleted</td>
  </tr>
  <tr class="deleted">
    <td>3</td>
    <td>Deleted</td>
  </tr>
</table>

这样做的好处是您不必指定第三种颜色，因为计算是由 CSS 完成的。缺点是目前在 IE 或 Edge 中不支持此功能。

background-blend-mode Firefox、Chrome 支持，Safari 部分支持。 http://caniuse.com/#feat=css-backgroundblendmode

原文由 Hidden Hobbes 发布，翻译遵循 CC BY-SA 3.0 许可协议