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渐变棋盘图案

回答

相关问题