CSS3改变背景颜色

Posted 2023-03-15

【中文标题】CSS3改变背景颜色

【英文标题】：CSS3 changing background colors

【发布时间】：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 之类的预处理器来实现您所说的。看看这个答案***.com/questions/21440789/…。

我听说过 LESS，虽然我从未使用过它。我会确保检查出来。

【参考方案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。已更正！