如何使用 css 创建棋盘格图案?
How do I create a checker patterned chessboard using css?
我的问题图片:
我正在尝试使用 html 和 css 创建一个棋盘,当我尝试为我创建的每个 div 块添加背景颜色时,它们看起来如上图。我想要一个棋盘格图案穿过棋盘,而不是一堆颜色相同的列沿着棋盘向下。我正在尝试在 css 中使用第 nth-child 伪选择器,但我不知道应该使用哪种公式来获得方格图案。第二行应该是绿色、灰色、绿色、灰色等。
我使用了一大堆 div 类 来创建所有不同的块,并将它们编号为 1 到 64。我使用网格来创建棋盘。我的 pusedo 选择器位于我的 css 代码的最底部。
这是我的 html:
<body>
<div class="grid-container">
<div class="item1"><img src="images/black_rook.png" height="65px" width="65px"></div>
<div class="item2"><img src="images/black_knight.png" height="65px" width="65px"></div>
<div class="item3"><img src="images/black_bishop.png" height="65px" width="65px"></div>
<div class="item4"><img src="images/black_queen.png" height="65px" width="65px"></div>
<div class="item5"><img src="images/black_king.png" height="65px" width="65px"></div>
<div class="item6"><img src="images/black_bishop.png" height="65px" width="65px"></div>
<div class="item7"><img src="images/black_knight.png" height="65px" width="65px"></div>
<div class="item8"><img src="images/black_rook.png" height="65px" width="65px"></div>
<div class="item9"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item10"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item11"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item12"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item13"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item14"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item15"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item16"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item17"></div>
<div class="item18"></div>
<div class="item19"></div>
<div class="item20"></div>
<div class="item21"></div>
<div class="item22"></div>
<div class="item23"></div>
<div class="item24"></div>
<div class="item25"></div>
<div class="item26"></div>
<div class="item27"></div>
<div class="item28"></div>
<div class="item29"></div>
<div class="item30"></div>
<div class="item31"></div>
<div class="item32"></div>
<div class="item33"></div>
<div class="item34"></div>
<div class="item35"></div>
<div class="item36"></div>
<div class="item37"></div>
<div class="item38"></div>
<div class="item39"></div>
<div class="item40"></div>
<div class="item41"></div>
<div class="item42"></div>
<div class="item43"></div>
<div class="item44"></div>
<div class="item45"></div>
<div class="item46"></div>
<div class="item47"></div>
<div class="item48"></div>
<div class="item49"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item50"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item51"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item52"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item53"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item54"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item55"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item56"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item57"><img src="images/white_rook.png" height="65px" width="65px"></div>
<div class="item58"><img src="images/white_knight.png" height="65px" width="65px"></div>
<div class="item59"><img src="images/white_bishop.png" height="65px" width="65px"></div>
<div class="item60"><img src="images/white_queen.png" height="65px" width="65px"></div>
<div class="item61"><img src="images/white king.png" height="65px" width="65px"></div>
<div class="item62"><img src="images/white_bishop.png" height="65px" width="65px"></div>
<div class="item63"><img src="images/white_knight.png" height="65px" width="65px"></div>
<div class="item64"><img src="images/white_rook.png" height="65px" width="65px"></div>
</div>
<script src="interactive.js"></script>
</body>
</html>
这是我的 css:
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.grid-container {
display: grid;
border: 3px solid black;
grid-auto-columns: 68px;
grid-auto-rows: 75px;
height: 600px;
width: 40%;
border-radius: 5px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
}
.item1 { grid-area: 1 / 1; }
.item2 { grid-area: 1 / 2; }
.item3 { grid-area: 1 / 3; }
.item4 { grid-area: 1 / 4; }
.item5 { grid-area: 1 / 5; }
.item6 { grid-area: 1 / 6; }
.item7 { grid-area: 1 / 7; }
.item8 { grid-area: 1 / 8; }
.item9 { grid-area: 2 / 1; }
.item10 { grid-area: 2 / 2; }
.item11 { grid-area: 2 / 3; }
.item12 { grid-area: 2 / 4; }
.item13 { grid-area: 2 / 5; }
.item14 { grid-area: 2 / 6; }
.item15 { grid-area: 2 / 7; }
.item16 { grid-area: 2 / 8; }
.item17 { grid-area: 3 / 1; }
.item18 { grid-area: 3 / 2; }
.grid-container div:nth-child(odd){
background-color: gray;
}
.grid-container div:nth-child(even) {
background-color: green;
}
尝试考虑这个:
可能会对您有所帮助。你只需要更换你的棋子。
<head>
<style type="text/css">
#chessboard, .black_square, .white_square {
display:block;
padding:0px;
margin:0px;
}
#chessboard {
width:384px;
height:384px;
border:4px solid #FF0000;
}
.black_square, .white_square {
width:48px;
height:48px;
float:left;
}
.black_square {
background-color: gray;
}
.white_square {
background-color: green;
}
</style>
</head>
<div id="chessboard">
<div>
<div class="white_square" id="KR8"></div>
<div class="black_square" id="KN8"></div>
<div class="white_square" id="KB8"></div>
<div class="black_square" id="K8"></div>
<div class="white_square" id="Q8"></div>
<div class="black_square" id="QB8"></div>
<div class="white_square" id="QN8"></div>
<div class="black_square" id="QR8"></div>
</div>
<div>
<div class="black_square" id="KR7"></div>
<div class="white_square" id="KN7"></div>
<div class="black_square" id="KB7"></div>
<div class="white_square" id="K7"></div>
<div class="black_square" id="Q7"></div>
<div class="white_square" id="QB7"></div>
<div class="black_square" id="QN7"></div>
<div class="white_square" id="QR7"></div>
</div>
<div>
<div class="white_square" id="KR6"></div>
<div class="black_square" id="KN6"></div>
<div class="white_square" id="KB6"></div>
<div class="black_square" id="K6"></div>
<div class="white_square" id="Q6"></div>
<div class="black_square" id="QB6"></div>
<div class="white_square" id="QN6"></div>
<div class="black_square" id="QR6"></div>
</div>
<div>
<div class="black_square" id="KR5"></div>
<div class="white_square" id="KN5"></div>
<div class="black_square" id="KB5"></div>
<div class="white_square" id="K5"></div>
<div class="black_square" id="Q5"></div>
<div class="white_square" id="QB5"></div>
<div class="black_square" id="QN5"></div>
<div class="white_square" id="QR5"></div>
</div>
<div>
<div class="white_square" id="KR4"></div>
<div class="black_square" id="KN4"></div>
<div class="white_square" id="KB4"></div>
<div class="black_square" id="K4"></div>
<div class="white_square" id="Q4"></div>
<div class="black_square" id="QB4"></div>
<div class="white_square" id="QN4"></div>
<div class="black_square" id="QR4"></div>
</div>
<div>
<div class="black_square" id="KR3"></div>
<div class="white_square" id="KN3"></div>
<div class="black_square" id="KB3"></div>
<div class="white_square" id="K3"></div>
<div class="black_square" id="Q3"></div>
<div class="white_square" id="QB3"></div>
<div class="black_square" id="QN3"></div>
<div class="white_square" id="QR3"></div>
</div>
<div>
<div class="white_square" id="KR2"></div>
<div class="black_square" id="KN2"></div>
<div class="white_square" id="KB2"></div>
<div class="black_square" id="K2"></div>
<div class="white_square" id="Q2"></div>
<div class="black_square" id="QB2"></div>
<div class="white_square" id="QN2"></div>
<div class="black_square" id="QR2"></div>
</div>
<div>
<div class="black_square" id="KR1"></div>
<div class="white_square" id="KN1"></div>
<div class="black_square" id="KB1"></div>
<div class="white_square" id="K1"></div>
<div class="black_square" id="Q1"></div>
<div class="white_square" id="QB1"></div>
<div class="black_square" id="QN1"></div>
<div class="white_square" id="QR1"></div>
</div>
</div>
不确定这是否是最佳解决方案,但我会这样做:
HTML & CSS:
#board {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 1px;
width: 400px
}
#board div {
background: brown;
height: 50px;
width: 50px;
}
#board div:nth-child(16n+2), #board div:nth-child(16n+4),
#board div:nth-child(16n+6), #board div:nth-child(16n+8), #board div:nth-child(16n+9),
#board div:nth-child(16n+11), #board div:nth-child(16n+13), #board div:nth-child(16n+15){
background: orange;
}
<div id="board">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
我不确定是否有一个公式可以匹配这个,但我认为这个公式足够短,易于理解和维护。
我的问题图片:
我正在尝试使用 html 和 css 创建一个棋盘,当我尝试为我创建的每个 div 块添加背景颜色时,它们看起来如上图。我想要一个棋盘格图案穿过棋盘,而不是一堆颜色相同的列沿着棋盘向下。我正在尝试在 css 中使用第 nth-child 伪选择器,但我不知道应该使用哪种公式来获得方格图案。第二行应该是绿色、灰色、绿色、灰色等。
我使用了一大堆 div 类 来创建所有不同的块,并将它们编号为 1 到 64。我使用网格来创建棋盘。我的 pusedo 选择器位于我的 css 代码的最底部。
这是我的 html:
<body>
<div class="grid-container">
<div class="item1"><img src="images/black_rook.png" height="65px" width="65px"></div>
<div class="item2"><img src="images/black_knight.png" height="65px" width="65px"></div>
<div class="item3"><img src="images/black_bishop.png" height="65px" width="65px"></div>
<div class="item4"><img src="images/black_queen.png" height="65px" width="65px"></div>
<div class="item5"><img src="images/black_king.png" height="65px" width="65px"></div>
<div class="item6"><img src="images/black_bishop.png" height="65px" width="65px"></div>
<div class="item7"><img src="images/black_knight.png" height="65px" width="65px"></div>
<div class="item8"><img src="images/black_rook.png" height="65px" width="65px"></div>
<div class="item9"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item10"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item11"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item12"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item13"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item14"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item15"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item16"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item17"></div>
<div class="item18"></div>
<div class="item19"></div>
<div class="item20"></div>
<div class="item21"></div>
<div class="item22"></div>
<div class="item23"></div>
<div class="item24"></div>
<div class="item25"></div>
<div class="item26"></div>
<div class="item27"></div>
<div class="item28"></div>
<div class="item29"></div>
<div class="item30"></div>
<div class="item31"></div>
<div class="item32"></div>
<div class="item33"></div>
<div class="item34"></div>
<div class="item35"></div>
<div class="item36"></div>
<div class="item37"></div>
<div class="item38"></div>
<div class="item39"></div>
<div class="item40"></div>
<div class="item41"></div>
<div class="item42"></div>
<div class="item43"></div>
<div class="item44"></div>
<div class="item45"></div>
<div class="item46"></div>
<div class="item47"></div>
<div class="item48"></div>
<div class="item49"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item50"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item51"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item52"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item53"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item54"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item55"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item56"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item57"><img src="images/white_rook.png" height="65px" width="65px"></div>
<div class="item58"><img src="images/white_knight.png" height="65px" width="65px"></div>
<div class="item59"><img src="images/white_bishop.png" height="65px" width="65px"></div>
<div class="item60"><img src="images/white_queen.png" height="65px" width="65px"></div>
<div class="item61"><img src="images/white king.png" height="65px" width="65px"></div>
<div class="item62"><img src="images/white_bishop.png" height="65px" width="65px"></div>
<div class="item63"><img src="images/white_knight.png" height="65px" width="65px"></div>
<div class="item64"><img src="images/white_rook.png" height="65px" width="65px"></div>
</div>
<script src="interactive.js"></script>
</body>
</html>
这是我的 css:
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.grid-container {
display: grid;
border: 3px solid black;
grid-auto-columns: 68px;
grid-auto-rows: 75px;
height: 600px;
width: 40%;
border-radius: 5px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
}
.item1 { grid-area: 1 / 1; }
.item2 { grid-area: 1 / 2; }
.item3 { grid-area: 1 / 3; }
.item4 { grid-area: 1 / 4; }
.item5 { grid-area: 1 / 5; }
.item6 { grid-area: 1 / 6; }
.item7 { grid-area: 1 / 7; }
.item8 { grid-area: 1 / 8; }
.item9 { grid-area: 2 / 1; }
.item10 { grid-area: 2 / 2; }
.item11 { grid-area: 2 / 3; }
.item12 { grid-area: 2 / 4; }
.item13 { grid-area: 2 / 5; }
.item14 { grid-area: 2 / 6; }
.item15 { grid-area: 2 / 7; }
.item16 { grid-area: 2 / 8; }
.item17 { grid-area: 3 / 1; }
.item18 { grid-area: 3 / 2; }
.grid-container div:nth-child(odd){
background-color: gray;
}
.grid-container div:nth-child(even) {
background-color: green;
}
尝试考虑这个:
可能会对您有所帮助。你只需要更换你的棋子。<head>
<style type="text/css">
#chessboard, .black_square, .white_square {
display:block;
padding:0px;
margin:0px;
}
#chessboard {
width:384px;
height:384px;
border:4px solid #FF0000;
}
.black_square, .white_square {
width:48px;
height:48px;
float:left;
}
.black_square {
background-color: gray;
}
.white_square {
background-color: green;
}
</style>
</head>
<div id="chessboard">
<div>
<div class="white_square" id="KR8"></div>
<div class="black_square" id="KN8"></div>
<div class="white_square" id="KB8"></div>
<div class="black_square" id="K8"></div>
<div class="white_square" id="Q8"></div>
<div class="black_square" id="QB8"></div>
<div class="white_square" id="QN8"></div>
<div class="black_square" id="QR8"></div>
</div>
<div>
<div class="black_square" id="KR7"></div>
<div class="white_square" id="KN7"></div>
<div class="black_square" id="KB7"></div>
<div class="white_square" id="K7"></div>
<div class="black_square" id="Q7"></div>
<div class="white_square" id="QB7"></div>
<div class="black_square" id="QN7"></div>
<div class="white_square" id="QR7"></div>
</div>
<div>
<div class="white_square" id="KR6"></div>
<div class="black_square" id="KN6"></div>
<div class="white_square" id="KB6"></div>
<div class="black_square" id="K6"></div>
<div class="white_square" id="Q6"></div>
<div class="black_square" id="QB6"></div>
<div class="white_square" id="QN6"></div>
<div class="black_square" id="QR6"></div>
</div>
<div>
<div class="black_square" id="KR5"></div>
<div class="white_square" id="KN5"></div>
<div class="black_square" id="KB5"></div>
<div class="white_square" id="K5"></div>
<div class="black_square" id="Q5"></div>
<div class="white_square" id="QB5"></div>
<div class="black_square" id="QN5"></div>
<div class="white_square" id="QR5"></div>
</div>
<div>
<div class="white_square" id="KR4"></div>
<div class="black_square" id="KN4"></div>
<div class="white_square" id="KB4"></div>
<div class="black_square" id="K4"></div>
<div class="white_square" id="Q4"></div>
<div class="black_square" id="QB4"></div>
<div class="white_square" id="QN4"></div>
<div class="black_square" id="QR4"></div>
</div>
<div>
<div class="black_square" id="KR3"></div>
<div class="white_square" id="KN3"></div>
<div class="black_square" id="KB3"></div>
<div class="white_square" id="K3"></div>
<div class="black_square" id="Q3"></div>
<div class="white_square" id="QB3"></div>
<div class="black_square" id="QN3"></div>
<div class="white_square" id="QR3"></div>
</div>
<div>
<div class="white_square" id="KR2"></div>
<div class="black_square" id="KN2"></div>
<div class="white_square" id="KB2"></div>
<div class="black_square" id="K2"></div>
<div class="white_square" id="Q2"></div>
<div class="black_square" id="QB2"></div>
<div class="white_square" id="QN2"></div>
<div class="black_square" id="QR2"></div>
</div>
<div>
<div class="black_square" id="KR1"></div>
<div class="white_square" id="KN1"></div>
<div class="black_square" id="KB1"></div>
<div class="white_square" id="K1"></div>
<div class="black_square" id="Q1"></div>
<div class="white_square" id="QB1"></div>
<div class="black_square" id="QN1"></div>
<div class="white_square" id="QR1"></div>
</div>
</div>
不确定这是否是最佳解决方案,但我会这样做:
HTML & CSS:
#board {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 1px;
width: 400px
}
#board div {
background: brown;
height: 50px;
width: 50px;
}
#board div:nth-child(16n+2), #board div:nth-child(16n+4),
#board div:nth-child(16n+6), #board div:nth-child(16n+8), #board div:nth-child(16n+9),
#board div:nth-child(16n+11), #board div:nth-child(16n+13), #board div:nth-child(16n+15){
background: orange;
}
<div id="board">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
我不确定是否有一个公式可以匹配这个,但我认为这个公式足够短,易于理解和维护。