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

“两个”都只显示一种颜色（绿色）的原因是因为在“红色”类之后定义了“绿色”类。

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

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

Answer 3

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

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

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

3 个答案: