问题描述
我想使用渐变创建棋盘格图案.我找到了一个示例,并根据需要对其进行了修改,但是它仅适用于-moz
前缀.当我删除-moz
前缀时,模式完全不同.
I want to create a checkerboard pattern using gradients. I've found an example and modified it to my needs, however it only works with -moz
prefix. When I remove the -moz
prefix, the pattern is completely different.
如何使此-moz
棋盘格模式与未添加前缀的linear-gradient
一起使用?
How can I make this -moz
checkerboard pattern work with unprefixed 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;
}
推荐答案
只需像下面的代码片段一样修改background-position
即可获得所需的输出.在Firefox,Chrome,Opera,IE11和Edge中可以正常工作.
Just modify the background-position
like in the below snippet to get the required output. This works fine in Firefox, Chrome, Opera, IE11 and 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
线性梯度和标准梯度处理角度的方式不同而引起的. -moz
线性渐变中的-45deg
似乎与标准渐变中的135deg
相等(但更改角度会导致中间出现一个奇怪的点).
The problem seems to be happening because of a difference in the way the angles are handled by the -moz
linear gradient and the standard one. -45deg
in the -moz
linear gradient seems to be equal to 135deg
in the standard gradient (but changing the angle is resulting in a strange dot in the middle).
以下屏幕截图显示了差异(两者均在最新的Firefox v44.0中采用).
The below screenshots show the difference (both taken in the latest Firefox v44.0).
具有-moz-linear-gradient的输出:
具有线性梯度的输出:
这篇关于CSS渐变棋盘图案的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!