CSS漸變棋盤圖案

我想使用漸變創建棋盤圖案。我找到了一個例子，並根據我的需要進行了修改，但它僅適用於-moz前綴。當我刪除前綴-moz時，模式完全不同。 CSS漸變棋盤圖案

如何使這個-moz棋盤圖案與前綴linear-gradient一起工作？

body { 
    background-image: 
    linear-gradient(45deg, #808080 25%, transparent 25%), 
    linear-gradient(-45deg, #808080 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #808080 75%), 
    linear-gradient(-45deg, transparent 75%, #808080 75%); 

    background-size:20px 20px;  
    background-position:0 0, 10px 0, 10px -10px, 0px 10px; 
}

來源

2016-02-12 Maciej Krawczyk

使用Autoprefixer（與NPM，咽，咕嚕，經由Prepros 4，真的是任何工具），而且前綴永遠不會有任何問題。否則caniuse.com是這種事情的參考（搜索「漸變」，然後單擊「查看所有（版本）」按鈕） – FelipeAls

只需修改background-position就像下面的代碼片段中獲得所需的輸出。這適用於Firefox，Chrome，Opera，IE11和Edge。

body { 
 
    background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%); 
 
    background-size: 20px 20px; 
 
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px; 
 
}

這個問題似乎是因爲在角度由-moz線性梯度和標準的一處理的方式的差異來發生。 -45deg中的-moz線性漸變似乎等於135deg中的標準漸變（，但更改角度導致中間中出現一個奇怪的點）。

下面的截圖顯示了不同（都採用最新的Firefox v44.0）。

輸出與-moz線性梯度：

輸出與線性梯度：

來源

2016-02-12 11:58:19 Harry

CSS漸變棋盤圖案

回答

相關問題