问题标签 [repeating-linear-gradient]

我有 10 个内联 div，它们具有相同的渐变类型 - 45 度线，但渐变有不同的颜色，div 有不同的宽度。

是否可以匹配渐变？（希望下面的图片能解释一下）

我的渐变 CSS。只有颜色变化。

现在的样子（行不匹配）：

我希望它看起来如何：

我想使用repeating-linear-gradient（或简单的 line background-image，不重要）模仿“注释行”：

如您所见，如果文本很长，则行会跳跃。我可以找到所有看起来都不错line-height的repeating-linear-gradient值，但是如果我更改浏览器比例，它会再次损坏。

那么如何计算正确的“线”大小？

非常感谢！

代码笔： https ://codepen.io/mraimon/pen/REdbOp

我正在尝试创建一个动画重复模式（对角线水平滑动），作为加载块的占位符（li在这种情况下）。

如何使动画平滑/连续，给人一种图案无限滑动的错觉？

• 如何计算元素width以使图案连续？（条纹不应该看起来破损/中断）。
• 如何使它看起来像它没有重新启动而是无限滑动一样循环？（100% 帧应该没有任何故障传递到 0% 帧）

目标是有一个可以添加到任何块的类，并且在视觉上看起来像加载/处理。

注意：没有JS；纯 CSS。

我正在尝试使用该选项设置border-image和background属性repeating-linear-gradient，但对同一<div>元素使用不同的值。我不知道该怎么做，因为在我的尝试中，渐变参数似乎重叠了，而且页面似乎采用了最后设置的值。

这是我得到的代码和输出：

如您所见，.under_banner有top-border属性，实际上 与repeating-linear-gradient不是对称的background。如果可能的话，我想只用一个 div 为每个属性获得不同的渐变。

先感谢您！

我正在尝试为进度条（HTML5<progess>标记）设置动画。我设法设置了 Shadow DOM 元素的样式，但我无法为背景设置动画（重复线性渐变）。它适用于 Firefox，但不适用于 Chrome 和 Edge。

<ins>它不起作用我的意思是，显示了条纹背景，但它不是动画的</ins>

似乎@keyframe动画定义在阴影边界之外具有不同的范围。

<ins>
如何打破 Shadow DOM 边界的范围？
或者有没有一种方法可以覆盖用户代理影子 DOM 实现？
</ins>

<ins>
如果有 No-JS 解决方案，我会很高兴
</ins>

我正在尝试使用剥离背景创建元素，repeating-linear-gradient但在容器上方 30px 处启动它。我正在使用该background-position属性，但渐变的最后一次重复总是被破坏：

示例代码：

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

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

由于上面的线性渐变动画，可以清楚地看到渐变的边缘 - 与与周围环境无缝融合相反。

试图隐藏边缘的解决方案是在顶部覆盖额外的渐变：

这种方法的问题是它隐藏了大部分原始渐变以及接缝。它还会在接缝处创建明亮的线条。

那么有没有办法在渐变结束时翻转或镜像渐变以创建无缝图案？或者，原始渐变可能会更大并缩小以产生无缝图案的错觉。这怎么可能实现？

我目前正在处理我的简历，并试图在上面有一些由线条组成的整洁的圆圈。

所以我使用了重复线性渐变，它可以工作，就像当你点击 CTRL + P 时它显示在浏览器和打印屏幕上一样，但是当你实际将它保存为 PDF 时，圆圈不会出现在 PDF 中文件。

我在 Google Chrome、Firefox、Microsoft Edge 上试过这个，但这些浏览器都不工作。

我只是想知道我是否做错了什么，或者是否有解决方法。

下面是我如何设置一个示例供您测试，我只是在 HTML 中创建了一个 div 并在 CSS 中应用了一些类。自己尝试一下，看看是否可以将由线条组成的圆圈保存为 PDF。我将不胜感激任何帮助解决这个问题。

为了repeating-linear-gradient在 CSS 中添加一个，可以使用类似于以下代码的内容来执行此操作。它将创建一个带有水平条的漂亮 div 元素。

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

一个可能的解决方案是linear-gradient改用硬编码所有需要的条形图。但是考虑到您必须为此解决方案编写相当多的代码，这是不可取的。

互联网上的其他搜索并未审查如何针对此特定用例完成此操作。例如，借助MDN 文档repeating-linear-gradient，可以查找其工作原理。但是由于它没有为这种情况提供示例，因此我不知道解决此问题的最佳方法。

我最近一直在尝试制作一个使用重复线性渐变来分隔行的文本区域，但是，当我滚动时渐变不会附加到文本框。难道我做错了什么？

顺便说一句，这是代码：

另外，这里是我使用的一些 URL：

文本区域中编号和分隔的行

重复线性渐变教程