0

为了repeating-linear-gradient在 CSS 中添加一个，可以使用类似于以下代码的内容来执行此操作。它将创建一个带有水平条的漂亮 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，可以查找其工作原理。但是由于它没有为这种情况提供示例，因此我不知道解决此问题的最佳方法。

4

2 回答 2

2

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

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

于 2021-04-04T14:56:08.373 回答
-1

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

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

这个答案的灵感来自另一个stackoverflow问题，我已经为此特定目的修改了代码。

于 2021-04-04T14:48:47.487 回答