2

我在获取斜条纹背景以在 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 每隔几行就会出现一个图案间隙。

4

2 回答 2

3

尝试这个：

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/

于 2014-03-17T13:19:35.200 回答
0

这似乎是 chrome 渲染错误，如此处回答：Chrome 线性渐变错误

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

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