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

這似乎是鍍鉻的渲染問題，問題回答：Chrome linear gradient bug

你可以嘗試一些替代品：

1. 使用模糊邊緣過渡喜歡在上面的鏈接
2. 使用SVG（外觀描述像這是你想要的模式：http://www.svgeneration.com/generate/Diagonal-Stripes）
3. 嘗試使用規則的線性漸變，並將其與背景大小相結合（不知道是否有可能獲得重複的背景，我會嘗試和m AKE筆更高版本）

Answer 2

試試這個：

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/