CSS渐变棋盘图案 [英] CSS gradient checkerboard pattern

问题描述

我想使用渐变创建棋盘格图案.我找到了一个示例，并根据需要对其进行了修改，但是它仅适用于-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渐变棋盘图案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！