Chrome中的css条纹bg奇怪答案

【问题标题】：css striped bg oddities in ChromeChrome中的css条纹bg奇怪
【发布时间】：2013-10-17 14:47:59
【问题描述】：

我在让有角度的条纹背景在 Chrome 中很好地显示时遇到问题。

background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 1px, transparent 0px, transparent 4px);

http://jsfiddle.net/hornetnz/JxvNd/

它似乎在 Firefox 和 IE10 中显示正常。但是 Chrome 每隔几行就会出现一个模式间隙。

【问题讨论】：

标签： css google-chrome

【解决方案1】：

试试这个：

background-image: -webkit-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: -o-repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%);

-webkit-background-size: 4px 4px;
   -moz-background-size: 4px 4px;
     -o-background-size: 4px 4px;
        background-size: 4px 4px;

/* Background size must be an even number! */

这是您更新后的示例：http://jsfiddle.net/JxvNd/1/

【讨论】：

这不适用于 Safari 8、Mac 或 Windows。条纹都乱了：Stripes not working on Safari
我最终使用 SVG 并创建了一个小 SASS 混合来做到这一点 - 设置 svg 有背景并为其着色 - codepen.io/gfra/pen/vOoErq （这不是相同的 1px 条纹，但你只需要制作一个新的 svg 条纹图案）

【解决方案2】：

这似乎是 chrome 渲染错误，此处已回答：Chrome linear gradient bug

您可以尝试以下一些替代方案：

使用上述链接中描述的模糊边缘过渡
使用 svg（看起来这是您想要的模式：http://www.svgeneration.com/generate/Diagonal-Stripes）
尝试使用常规线性渐变并将其与背景大小相结合（不确定是否可以通过这种方式获得重复背景。我稍后会尝试制作笔）

【讨论】：