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

Question

我有以下代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何设置，以便在元素上设置.deleted和.reviewed类时，background-color的{{1}}会考虑.deleted background-color的？

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

Answer 1

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

.deleted {
    background-color:red;
}
.reviewed.deleted {
    background-color:/*use color code for something dark red*/
}

.reviewed.deleted表示具有类reviewed和deleted

的元素

Answer 2

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

在这种情况下，Button可以为您提供所需的效果，使background-blend-mode: mulitply;的{{1}}变暗。

需要进行以下更改：

将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能够使用.reviewed

background-blend-mode

将background-color添加到.deleted以使背景颜色与＆＃34;背景图像混合＆＃34;在background-blend-mode: multiply;

＆＃13;

.deleted

＆＃13;

.reviewed

＆＃13;

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

Firefox，Chrome支持

.reviewed { background-image: linear-gradient(0deg, rgba(228, 225, 219, 1), rgba(228, 225, 219, 1)); } .deleted { background-blend-mode: multiply; background-color: red; }，部分支持Safari。 https://codecov.io/support

Answer 3

你可以将css背景设置为渐变并产生类似于photoshop中的类似效果

示例渐变

{{1}}

Answer 4

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

SASS example：

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

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

LESS Example

如何在CSS中混合颜色？

4 个答案:

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