Chrome 中的 css 条纹 bg 奇怪之处

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/