CSS：由多个类定义的渐变？

Question

是否可以定义多个类，每个类都有一个背景颜色。那么当一个元素有多个这些类时，背景会像渐变一样消失吗？并在纯 css 中执行此操作（因为我已经有执行此操作的代码，但我想知道是否有更好的方法）？

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.wantedResult{
  background-image: linear-gradient(to right, red, green);
}

<div class="red">Red</div>
<div class="green">Green</div>
<div class="red green">Both</div>
<div class="wantedResult">WantedResult</div>

如您所见，“both”元素仅显示其中一种背景。但它应该将两者都显示为渐变。

有什么办法吗？

注意：当然这是一个非常简单的例子，只有两种颜色，定义“wantedResult”类也没什么大不了的。但是如果有例如十种使用的颜色，它很快就会变得难以管理。

Answer 1

显然没有 CSS 方法可以直接实现这一点，因为浏览器不知道当有 2 或 3 种颜色时应该如何定义渐变。有很多可能性。

一种方法是考虑 CSS 变量以简化思考。这个想法是使用一些默认颜色来定义渐变，您可以通过更改变量来更改这些颜色。同样，这不会产生您想要的效果，但至少可以避免您定义大量渐变。

.red_1 {
  --color1: red;
}
.red_2 {
  --color2: red;
}

.green_1 {
  --color1: green;
}
.green_2 {
  --color2: green;
}

.coloration{
  background: linear-gradient(var(--color1,pink),var(--color2,pink));
}

div {
 height:50px;
 margin:5px;
}

<div class="coloration">default</div>

<div class="coloration green_1 green_2">green</div>

<div class="coloration red_1 green_2">green red</div>

<div class="coloration red_2 green_1">green red</div>

<div class="coloration red_2 red_1">red</div>

Answer 2

“both”之所以只显示一种颜色（绿色）是因为“green”类是在“red”类之后定义的。

这意味着如果您在一个元素上同时拥有两个类，则该元素将始终具有稍后定义的颜色（例如，如果您首先定义类绿色 - 即编写 ".green{background-color: green ;}”，那么“both”将显示为红色，反之亦然）。

如果您真的想要这样做，您可以使用 javascript 检查元素是否同时具有两个类，如果有，则将背景设置为线性渐变。
但我真的不建议这样做，而是创建另一个具有线性渐变作为背景颜色的类。

Answer 3

虽然 CSS 没有自动命令来执行您要查找的操作，但您当然可以通过使用具有渐变的新定义手动覆盖 double 类来作弊。

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.red.green{
  background-image: linear-gradient(to right, red, green);
}

.wantedResult{
  background-image: linear-gradient(to right, red, green);
}

<div class="red">Red</div>
<div class="green">Green</div>
<div class="red green">Both</div>
<div class="wantedResult">WantedResult</div>

Answer 4

不幸的是，仅通过使用两个具有不同 background-color 值的类来获得渐变背景是不可能的。似乎使用线性渐变是您唯一的选择。

也许您可以根据需要拥有一堆具有不同颜色组合的渐变图像，然后将图像设置为背景。这将使您的样式更具可读性和可管理性，尽管有些人可能不认为这是“纯 CSS”。