repeating-linear-gradient 在最后一次重复时损坏

Question

我正在尝试使用 repeating-linear-gradient 创建具有剥离背景的元素，但它在容器上方 30px 处开始。我用的是background-position属性，但是最后一次重复的渐变总是坏掉的：

示例代码：

.wrapper {
    --color-a: #eaecef;
    --color-b: white;
    --gradient-height: 60px;

    background: repeating-linear-gradient(180deg,
        var(--color-a),
        var(--color-a)      calc(var(--gradient-height) - 1px),
        var(--color-b)      var(--gradient-height),
        var(--color-b)      calc(var(--gradient-height) * 2 - 1px)
    );
    background-position-y: -30px;
}

和 fiddle 工作（意味着损坏 :D）示例：https://jsfiddle.net/b3mhe2c5/5/

[编辑] 设置 background-repeat: none 在此示例中有所帮助，但由于 children 的数量不同，它又被破坏了：https://jsfiddle.net/phsjunLw/

Answer 1

尝试增加 y 背景大小与位置移动的一样多。

.wrapper {
  --color-a: #eaecef;
  --color-b: white;
  --gradient-height: 60px;
    background: repeating-linear-gradient(180deg,
        var(--color-a),
        var(--color-a)      calc(var(--gradient-height)),
        var(--color-b)      var(--gradient-height),
        var(--color-b)      calc(var(--gradient-height) * 2)
    );
  background-position-y: -30px;
  background-size: 100% calc(100% + 30px);
}

.element {
  height: 10px;
  padding: 10px;
  line-height: 10px;
}

<div class="wrapper">
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
</div>

Answer 2

当涉及到重复渐变时，总是设置一个非常大的高度来避免这样的问题。 200% 应该适合所有职位：

.wrapper {
    --color-a: #eaecef;
    --color-b: white;
    --gradient-height: 60px;

    background: repeating-linear-gradient(
        var(--color-a) 0 calc(var(--gradient-height)),
        var(--color-b) 0 calc(var(--gradient-height) * 2)
    );
    background-position:0 -30px;
    background-size: 100% 200%;
}

.element {
  height: 10px;
  padding: 10px;
  line-height: 10px;
}

<div class="wrapper">
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
</div>

或者确保大小是最小部分的乘数：

.wrapper {
    --color-a: #eaecef;
    --color-b: white;
    --gradient-height: 60px;

    background: repeating-linear-gradient(
        var(--color-a) 0 calc(var(--gradient-height)),
        var(--color-b) 0 calc(var(--gradient-height) * 2)
    );
    background-position:0 -30px;
    background-size: 100% calc(var(--gradient-height) * 2);
}

.element {
  height: 10px;
  padding: 10px;
  line-height: 10px;
}

<div class="wrapper">
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
</div>

或者不使用重复渐变：

.wrapper {
  --color-a: #eaecef;
  --color-b: white;
  --gradient-height: 60px;
  
  background: linear-gradient(var(--color-a) 50%, var(--color-b) 0);
  background-position: 0 -30px;
  background-size: 100% calc(var(--gradient-height) * 2);
}

.element {
  height: 10px;
  padding: 10px;
  line-height: 10px;
}

<div class="wrapper">
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
</div>

您也可以使用第 nth-child 实现您想要的着色

.element {
  height: 10px;
  padding: 10px;
  line-height: 10px;
}

.element:nth-child(4n + 1),
.element:nth-child(4n + 4){
   background:#eaecef
}

<div class="wrapper">
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
</div>

repeating-linear-gradient 在最后一次重复时损坏

repeating-linear-gradient broken on the last repetition

css

repeating-linear-gradient