如何在CSS中停止重复线性梯度？

Question

为了在CSS中添加一个repeating-linear-gradient，可以使用如下代码来实现这一点。它将创建一个很好的div元素与水平条。

​

.gradient {
  background: repeating-linear-gradient(90deg, green, green 10px, #ffffff 10px, #ffffff 20px);
}

div {
  width: 390px;
  height: 50px;
  border: 1px solid black;
}

<div class="gradient"></div>

​

然而，挑战是让这个重复的梯度停止/结束在元素的一半的过程中。此元素的后半部分不应显示渐变。如何才能做到这一点？

一个可能的解决方案是使用linear-gradient代替和硬编码所有您需要的栏。但是，考虑到您需要为这个解决方案编写大量的代码，这是不可取的。

在互联网上的其他搜索并没有审查如何为这个特定的用例做到这一点。例如，在MDN文档的帮助下，可以查找repeating-linear-gradient是如何工作的。但是，由于它没有为这种情况提供一个例子，我不知道解决这一问题的最佳办法。

Answer 1

定义梯度大小并禁用重复：

​

.gradient {
  background: 
    repeating-linear-gradient(90deg, green 0 10px, #ffffff 0 20px)
    left  / 50%   100% no-repeat;
/*position / width height */
}

div {
  width: 390px;
  height: 50px;
  border: 1px solid black;
}

<div class="gradient"></div>

​

Answer 2

经过一些周旋之后，我找到了下面的解决方案，在linear-gradient的基础上引入了一个repeating-linear-gradient，给出了渐变已经停止的错觉。通过将linear-gradient的最后一个值设置为0.0，可以使这个rgba的第一部分完全透明。

​

.gradient {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.0) 50%, rgb(255, 255, 255) 50%),
    repeating-linear-gradient(90deg, green, green 10px, #ffffff 10px, #ffffff 20px);
}

div {
  width: 390px;
  height: 50px;
  border: 1px solid black;
}

<div class="gradient"></div>

​

这个答案的灵感来自于另一个堆栈溢出问题，我已经为此目的修改了代码。