Question

我在使用带角度的条纹背景时很难在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每隔几行就会形成一个模式差距。

Answer 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/

Answer 2

这似乎是Chrome渲染错误，如下所示：Chrome linear gradient bug

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

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

css条纹bg古怪的铬

2 个答案: