问题标签 [repeating-linear-gradient]

我正在尝试在每条线之间的间距很宽的边框上使用重复线性渐变。1px6px

有人能告诉我我做错了什么，所以当它们重复时线条的宽度不一样？我试过调整像素值，但它们永远不匹配。

JSFiddle

我有这个重复的线性渐变 CSS 设计。

我知道颜色参数是什么意思，但颜色后面的百分比似乎含糊不清。它的真正含义是什么？那是标识颜色必须开始的位置吗？要不然是啥？

我已经阅读了文档，但我无法理解。有人可以用更简单的语言向我解释吗？

谢谢你。

我想重新创建类似于优步品牌网站的线条图案：https ://brand.uber.com/ - 特别是您可以在后台看到的重复线条：http: //prntscr.com/etius6

为此，我想到了使用带有 css 的重复线性渐变。

它有效，但我想稍微调整一下。基本上我想消除第一个条，但是我尝试的任何方法都只会使渐变消失或者变得奇怪地变薄，总是将条留在它们现在所在的位置..background-position也没有效果。

任何帮助都会很棒，谢谢

我正在尝试使用绝对定位的不可交互 div 创建网格覆盖。我正在尝试使用 repeating-linear-gradient 属性来完成此操作，正如我在其他地方为该解决方案所建议的那样。此功能的实现在 Chrome 上运行良好，但我似乎需要某种 polyfill - 或者我做错了什么 - 以实现 Firefox 兼容性。

要查看该问题，请在最新版本的 firefox（52，尽管其他版本也显示我的问题）中并访问此 jsfiddle：

https://jsfiddle.net/g5v0o7ks/4/

有问题的结果css：

每个输入加 1。也减少它们。当超过 255 像素时，线性渐变完全消失，这在 chrome 中似乎不会发生。我也尝试过使用百分比值来处理这个问题，但是渐变仍然会在 255 像素的硬限制上消失。

我认为这个问题不是预期的行为，因为背景大小在 MDN 页面上没有任何注明的像素限制。以前有没有人遇到过这个问题，或者您是否注意到我的代码中有一个错误导致 jsfiddle 无法按预期运行？

<div>我在 SASS中绘制了一个网格作为以下方式的重复背景：

它呈现以下方式：

但我希望它以15px向左偏移（或4 * $minor-grid-size + 15px向右偏移）呈现，即：

现在我不能使用margin-left，因为它也会偏移<div>标签内的元素，我不希望这样，看这里的小提琴（不要关注 JS）。

我只希望背景有一个偏移量。

我刚刚将 OSX 升级到 High Sierra，将 Safari 升级到 11.01，我重复的线性渐变完全不正常。这是最新版本 Safari 的已知问题吗？

图像显示了与 Chrome 的比较，它仍然按预期运行（此处为 codepen）。

如何使用 CSS 创建以下彩虹效果？

即带有纯色彩虹色停止的顶部圆形边框（不插入html）。

颜色是：#c4e17f. #f7fdca, #fad071, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4。

到目前为止我已经尝试过：

我正在尝试使用 font-awesomefa-star-o图标创建一个条纹星，如下所示。我使用背景渐变来创建这种效果，但不是仅仅覆盖星形图标，而是覆盖图标周围的整个方形空间。字体真棒图标可能无法实现我想要实现的目标，因此也可以接受其他建议，但更喜欢带有图标的答案。

我试图只使用 CSS 制作一些方形背景，但我只得到了线条背景，没有水平线的选项。

这是我的示例代码：

这就是我正在寻找的结果

这是我现在得到的结果

我已经为镜像对角线背景图案创建了一个解决方案，但错误仅存在于 Firefox 中，在某些屏幕宽度下，左右定位元素之间会出现一条垂直线。有没有人有解决方案或黑客？唯一的要求是背景是 CSS（没有链接的图像文件）。