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

我一直在尝试不使用画布来创建棋盘图案。问题是，我需要一个100像素×100像素的正方形，其中每个像素在绿色[rgb（0,255,0）]和黄色[rgb（255,255,0）]之间交替（像棋盘，但在像素级）。我可以用html进行复制和粘贴... [Here]（http://jsfiddle.net/DyEq9/3/）。在没有画布的情况下在html/javascript中制作棋盘格？

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

来源

2013-01-23 stefvhuynh

调查软件？ –

最简单的解决方案是创建一个2x2图像并将其设置为背景。另一种方法是使用CSS3渐变创建效果。 – Shmiddty

http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ – Bergi

克里斯托弗所说，你可以创建网格的一个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);

来源

2013-01-23 23:14:04 Shmiddty

为什么只使用'-webkit'前缀？ – Bergi

@Bergi因为我很懒，我不想写出每一个。 – Shmiddty

谢谢！这很好。 – stefvhuynh

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

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

来源

2013-01-23 23:00:25

这样，如果需要，您仍然可以根据坐标放置棋子，只需少很多的标记。 –

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

回答

相关问题