代码之家 › 专栏 › 技术社区 › The Oddler

CSS:由多个类定义的渐变?

css

The Oddler · 技术社区 · 7 年前

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

有没有办法做到这一点?

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

3 回复 | 直到 7 年前

Temani Afif 7 年前

很明显,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>