渐变条纹背景颜色理解

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度角放置。
• 渐变以浅色石灰开始，并在25px标记处逐渐变为绿色。
• 在25px时，颜色从绿色突然变为石灰，并继续变为绿色直至50px。
• 渐变是重复的线性渐变，因此将重复直到整个容器充满图案。重复处理就像瓷砖一样，您可以将其视为将相同大小的瓷砖放在彼此周围，以便填满整个区域。

不使用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度角放置。
• 渐变以颜色石灰开始，并将继续保持颜色直至25px标记。
• 在25px时，颜色从石灰突然变为绿色，并持续变绿，直到50px。
• 此图案将再次重复，直到覆盖整个元素大小，从而产生条纹图案。

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>