1

我正在尝试使用剥离背景创建元素，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;
}

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

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

4

2 回答 2

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>

于 2021-01-18T14:42:31.533 回答
1

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

.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>

于 2021-01-18T16:27:26.533 回答