重复线性梯度在最后一次重复

问题描述

我正在尝试使用 repeating-linear-gradient 创建带有剥离背景的元素，但在容器上方 30 像素处启动它。我正在使用 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;
}

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

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

解决方法

尝试将 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>

,

当涉及到重复渐变时，总是设置一个非常大的高度以避免此类问题。 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>