CSS3改变背景颜色答案

【问题标题】：CSS3 changing background colorsCSS3改变背景颜色
【发布时间】：2015-05-23 03:17:42
【问题描述】：

我想要一系列元素，我想要有增量的背景颜色，但我也不想硬编码它以便将来扩展。

<div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
</div>

我可以这样做：

.container div:nth-child(0) {
    background-color: #0000ff;
}
.container div:nth-child(1) {
    background-color: #000066;
}
.container div:nth-child(2) {
    background-color: #000000;
}

我宁愿用一条规则来做到这一点，这将允许更简洁的代码并允许更多的可扩展性（例如，6 个元素）。这甚至可能吗？我知道这样的事情对于 JQuery 来说非常简单，但如果可能的话，我宁愿只使用 CSS。

【问题讨论】：

我建议使用 CSS 预处理器，如 SASS 或 LESS。这非常适合此类用例；）
虽然这不能直接解决您的问题，但您可以通过使用循环来使用 LESS 之类的预处理器来实现您所说的。看看这个答案stackoverflow.com/questions/21440789/…。
我听说过 LESS，虽然我从未使用过它。我会确保检查出来。

标签： css background-color

【解决方案1】：

你可以用一个非常大的渐变来处理这个问题，并且只设置位置

.container div {
  background-image: linear-gradient(yellow, blue);
  background-size: 20000px 20000px;
  }

.container div:nth-child(1) {
  background-position: 0% 0%;
}

.container div:nth-child(2) {
  background-position: 0% 30%;
}

.container div:nth-child(3) {
  background-position: 0% 100%;
}

<div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
</div>

【讨论】：

有趣的概念。这是普遍支持的吗？在我的浏览器 (Firefox) 上，所有 3 个框看起来都一样。
有一个错误影响了 FF。已更正！