渐变条纹背景颜色理解

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>

渐变条纹背景颜色理解

Gradient Stripe Background Color Understanding

css

gradient

linear-gradients