渐变条纹背景颜色理解

Question

我需要了解这种对齐方式！我已经为这个问题做了很多搜索，但仍然不清楚。

请看看这个模式：

为了使用 CSS 生成它，我们应该这样写：

 background:repeating-linear-gradient(45deg,lime ,green 25px ,lime 25px,green 50px );

这将在上面创建一个 50x50 的正方形图案，但我无法理解这背后的逻辑！在某处我读到同一停止点的两种颜色会使颜色更清晰，但没有提到插值和合并！如果有人能帮助我理解 CSS 函数中使用的模板，我会很高兴。

Answer 1

background:repeating-linear-gradient(45deg,lime ,green 25px ,lime 25px,green 50px );

这个背景设置可以解释如下：

• 渐变图像与容器呈 45 度角放置。
• 渐变以青柠色开始，在 25 像素处逐渐变为绿色。
• 在 25 像素处，颜色突然从绿色变为石灰，然后继续变为绿色，直到 50 像素。
• 渐变是重复的线性渐变，因此会一直重复，直到整个容器被图案填满。重复就像瓷砖一样处理，您可以将其视为在彼此周围放置相同大小的瓷砖以填满整个区域。

如果不使用repeating-linear-gradient，您只会得到一个 50px x 50px 的背景图片。

div {
  height: 200px;
  width: 200px;
  border: 1px solid;
}
.repeating-gradient {
  background: repeating-linear-gradient(45deg, lime, green 25px, lime 25px, green 50px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="repeating-gradient"></div>

---

如果你想达到图像中的效果，那么你需要将你的渐变更改为以下：

  background: repeating-linear-gradient(45deg, lime, lime 25px, green 25px, green 50px);

这个背景设置可以解释如下：

• 渐变图像与容器呈 45 度角放置。
• 渐变以青柠色开始，并将继续保持颜色直到 25 像素标记。
• 在 25 像素处，颜色突然从石灰变为绿色，并在 50 像素处继续保持绿色。
• 此图案将再次重复，直到元素的整个尺寸被覆盖，因此会产生条纹图案。

div {
  height: 200px;
  width: 200px;
  border: 1px solid;
}
.repeating-gradient {
  background: repeating-linear-gradient(45deg, lime, lime 25px, green 25px, green 50px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="repeating-gradient"></div>