如何在 CSS 中停止重复线性渐变？

问题描述

为了在 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 并对所有需要的条进行硬编码。但鉴于您必须为此解决方案编写相当多的代码，这是不可取的。

互联网上的其他搜索未审查如何针对此特定用例执行此操作。例如，在 the MDN documentation 的帮助下，您可以查找 repeating-linear-gradient 的工作原理。但由于它没有提供这种情况的示例，我不知道解决这个问题的最佳方法。

解决方法

定义渐变大小并禁用重复：

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

,

经过一番折腾之后，我得出了以下解决方案，我在 linear-gradient 的顶部引入了一个 repeating-linear-gradient，给人一种渐变已经停止的错觉。这是通过将 linear-gradient 的最后一个值设置为 rgba 使此 0.0 的第一部分完全透明来实现的。

.gradient {
  background:
    linear-gradient(90deg,rgba(255,255,0.0) 50%,rgb(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>

此答案的灵感来自 this other stackoverflow question，我已为此特定目的修改了代码。