javascript - 在没有画布的情况下用 html/javascript 制作棋盘？

Question

我一直在尝试在不使用画布的情况下创建棋盘图案。问题是，我需要一个 100 像素 x 100 像素的正方形，其中每个像素在绿色 [rgb(0, 255, 0)] 和黄色 [rgb(255, 255, 0)] 之间交替（就像棋盘一样，但在像素级别）。我可以在 html 中进行大量复制和粘贴... [这里] (http://jsfiddle.net/DyEq9/3/)。

但是，我使用的调查软件不允许这么长的代码。该软件似乎也不支持画布功能。任何帮助表示赞赏。

Answer 1

正如克里斯托弗所提到的，您可以创建一个 2x2 图像版本的网格并将其设置为背景图像，并重复。这可能是迄今为止最好的解决方案。

如果由于某种原因这是不可能的，并且您可以访问 CSS3，您可以这样做：

http://jsfiddle.net/DyEq9/4/

width:100px;
height:100px;
background-size: 2px 2px;
background-position: 0 0, 1px 1px;
background-color:#ff0;
background-image: -webkit-linear-gradient(45deg, #0f0 25%, transparent 25%, transparent 75%, #0f0 75%, #0f0), -webkit-linear-gradient(45deg, #0f0 25%, transparent 25%, transparent 75%, #0f0 75%, #0f0);

Answer 2

你可以用你的绿色/黄色背景创建一个 200px x 100px 的图像来伪造它，然后重复它。

.chessboard-container {
 background:url('chess-tile.gif') repeat;
}