在沒有畫布的情況下在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中製作棋盤格？

回答

相關問題