这个简单的CSS和html象棋布局有什么问题?(短代码)

我正在制作一个棋盘，我的主要问题是在我设置了棋盘的前两行之后，插入的棋子会改变深色方块的颜色。

因此，董事会拥有"；主"；正方形(class＝"box"(是与板(白色(相同的颜色或者是棕色。组件(pawn(是一个SVG。将典当ID添加到方块后，方块颜色无效。这对白色方块来说很好，但对棕色方块来说是个问题。

这是代码

body {
background-color: grey;
}
.main {
height: 50%;
width: 70%;
margin: 10% 15%;
background: white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.box {
height: 100%;
width: 100%;
border: 1px solid black;
}
.box:nth-child(even) {
background: burlywood;
}
#pawn {
background: url(https://svgsilh.com/svg/3413417.svg) center;
background-size: cover;
}

<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
</div>
</body>
</html>

如果你想让height和width%起作用，你应该给它的父项一个height和width=，因为这就是他们认为的100%。在这种情况下，您在主体标签中有%，但没有说明宽度或高度。

在这种情况下，你不能使用这些%，所以我使用了静态px，以便更快地完成它，并且不重新构建html。

背景的问题是，当你添加一个图像作为背景时，它会覆盖以前的背景，所以为了拥有一个具有样式背景的透明图像，你必须将其添加为具有该背景的容器的内容(img(。

我还更改了main标签的main类，并替换了id pawn，因为您不应该有多个具有相同id的标签，换句话说，它应该是唯一的，如果您想使用更多，请使用一个类。

body {
background-color: grey;
width: 100vw;
height: 100vh;
}
main {
height: 100px;
width: 450px;
margin: 10% 15%;
background: white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.box {
height: 48px;
width: 48px;
border: 1px solid black;
}
.box:nth-child(even) {
background: burlywood;
}
img{
width:100%;
height:100%;
}

<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<main>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
</main>
</body>
</html>

您的错误是将svg作为背景图片导入。所以它不再是一个真正的svg了。此svg图片将覆盖box属性。你可以通过把svg一个接一个地放在div.祝你好运

<head>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<style>
body {
background-color: grey;
}

.main {
height: 50%;
width: 70%;
margin: 10% 15%;
background-color: white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.box {
height: 100%;
width: 100%;
border: 1px solid black;
}

.box:nth-child(even) {
background: burlywood;
}
/*
#pawn {
background: url(https://svgsilh.com/svg/3413417.svg) center;
background-size: cover;
}*/
</style>
<body>

<div class="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<div class="box" id="pawn"><svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="100%" height="100%" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M6240 9660 c-210 -37 -369 -113 -507 -244 -142 -134 -246 -294 -278 -427 -19 -83 -19 -215 1 -319 42 -221 151 -394 326 -517 84 -59 128 -104 128 -132 0 -27 -37 -69 -78 -90 -21 -10 -93 -37 -162 -61 -141 -48 -277 -111 -315 -146 -19 -17 -25 -33 -25 -63 0 -66 17 -88 124 -159 273 -179 387 -297 461 -481 60 -148 91 -444 75 -725 -15 -251 -48 -401 -126 -561 -76 -159 -177 -271 -394 -438 -98 -75 -103 -83 -125 -182 -10 -47 -72 -98 -146 -120 -199 -58 -350 -173 -472 -358 -65 -97 -100 -178 -127 -290 -37 -154 -25 -237 46 -316 26 -29 44 -58 42 -68 -2 -10 -37 -36 -78 -58 -95 -53 -129 -95 -136 -166 -14 -146 92 -208 445 -259 805 -116 2540 -100 3129 29 214 47 282 98 282 211 0 83 -41 135 -150 190 -49 25 -70 45 -70 66 0 2 18 24 40 48 53 58 70 102 70 183 0 321 -278 690 -586 778 -128 37 -166 72 -185 167 -13 66 -7 59 -208 219 -181 144 -292 299 -360 504 -47 144 -62 256 -68 503 -10 422 37 637 182 830 63 84 138 148 313 267 131 89 148 104 161 141 13 37 12 44 -5 80 -16 33 -32 46 -113 85 -51 26 -150 66 -220 89 -194 66 -234 92 -234 150 0 38 26 66 124 135 218 153 340 398 340 680 0 161 -45 287 -152 428 -181 239 -398 365 -702 406 -103 14 -142 13 -267 -9z"/>
</g>
</svg></div>
<div class="box" id="pawn"><svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="100%" height="100%" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M6240 9660 c-210 -37 -369 -113 -507 -244 -142 -134 -246 -294 -278 -427 -19 -83 -19 -215 1 -319 42 -221 151 -394 326 -517 84 -59 128 -104 128 -132 0 -27 -37 -69 -78 -90 -21 -10 -93 -37 -162 -61 -141 -48 -277 -111 -315 -146 -19 -17 -25 -33 -25 -63 0 -66 17 -88 124 -159 273 -179 387 -297 461 -481 60 -148 91 -444 75 -725 -15 -251 -48 -401 -126 -561 -76 -159 -177 -271 -394 -438 -98 -75 -103 -83 -125 -182 -10 -47 -72 -98 -146 -120 -199 -58 -350 -173 -472 -358 -65 -97 -100 -178 -127 -290 -37 -154 -25 -237 46 -316 26 -29 44 -58 42 -68 -2 -10 -37 -36 -78 -58 -95 -53 -129 -95 -136 -166 -14 -146 92 -208 445 -259 805 -116 2540 -100 3129 29 214 47 282 98 282 211 0 83 -41 135 -150 190 -49 25 -70 45 -70 66 0 2 18 24 40 48 53 58 70 102 70 183 0 321 -278 690 -586 778 -128 37 -166 72 -185 167 -13 66 -7 59 -208 219 -181 144 -292 299 -360 504 -47 144 -62 256 -68 503 -10 422 37 637 182 830 63 84 138 148 313 267 131 89 148 104 161 141 13 37 12 44 -5 80 -16 33 -32 46 -113 85 -51 26 -150 66 -220 89 -194 66 -234 92 -234 150 0 38 26 66 124 135 218 153 340 398 340 680 0 161 -45 287 -152 428 -181 239 -398 365 -702 406 -103 14 -142 13 -267 -9z"/>
</g>
</svg></div>
<div class="box" id="pawn"><svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="100%" height="100%" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M6240 9660 c-210 -37 -369 -113 -507 -244 -142 -134 -246 -294 -278 -427 -19 -83 -19 -215 1 -319 42 -221 151 -394 326 -517 84 -59 128 -104 128 -132 0 -27 -37 -69 -78 -90 -21 -10 -93 -37 -162 -61 -141 -48 -277 -111 -315 -146 -19 -17 -25 -33 -25 -63 0 -66 17 -88 124 -159 273 -179 387 -297 461 -481 60 -148 91 -444 75 -725 -15 -251 -48 -401 -126 -561 -76 -159 -177 -271 -394 -438 -98 -75 -103 -83 -125 -182 -10 -47 -72 -98 -146 -120 -199 -58 -350 -173 -472 -358 -65 -97 -100 -178 -127 -290 -37 -154 -25 -237 46 -316 26 -29 44 -58 42 -68 -2 -10 -37 -36 -78 -58 -95 -53 -129 -95 -136 -166 -14 -146 92 -208 445 -259 805 -116 2540 -100 3129 29 214 47 282 98 282 211 0 83 -41 135 -150 190 -49 25 -70 45 -70 66 0 2 18 24 40 48 53 58 70 102 70 183 0 321 -278 690 -586 778 -128 37 -166 72 -185 167 -13 66 -7 59 -208 219 -181 144 -292 299 -360 504 -47 144 -62 256 -68 503 -10 422 37 637 182 830 63 84 138 148 313 267 131 89 148 104 161 141 13 37 12 44 -5 80 -16 33 -32 46 -113 85 -51 26 -150 66 -220 89 -194 66 -234 92 -234 150 0 38 26 66 124 135 218 153 340 398 340 680 0 161 -45 287 -152 428 -181 239 -398 365 -702 406 -103 14 -142 13 -267 -9z"/>
</g>
</svg></div>
<div class="box" id="pawn"><svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="100%" height="100%" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M6240 9660 c-210 -37 -369 -113 -507 -244 -142 -134 -246 -294 -278 -427 -19 -83 -19 -215 1 -319 42 -221 151 -394 326 -517 84 -59 128 -104 128 -132 0 -27 -37 -69 -78 -90 -21 -10 -93 -37 -162 -61 -141 -48 -277 -111 -315 -146 -19 -17 -25 -33 -25 -63 0 -66 17 -88 124 -159 273 -179 387 -297 461 -481 60 -148 91 -444 75 -725 -15 -251 -48 -401 -126 -561 -76 -159 -177 -271 -394 -438 -98 -75 -103 -83 -125 -182 -10 -47 -72 -98 -146 -120 -199 -58 -350 -173 -472 -358 -65 -97 -100 -178 -127 -290 -37 -154 -25 -237 46 -316 26 -29 44 -58 42 -68 -2 -10 -37 -36 -78 -58 -95 -53 -129 -95 -136 -166 -14 -146 92 -208 445 -259 805 -116 2540 -100 3129 29 214 47 282 98 282 211 0 83 -41 135 -150 190 -49 25 -70 45 -70 66 0 2 18 24 40 48 53 58 70 102 70 183 0 321 -278 690 -586 778 -128 37 -166 72 -185 167 -13 66 -7 59 -208 219 -181 144 -292 299 -360 504 -47 144 -62 256 -68 503 -10 422 37 637 182 830 63 84 138 148 313 267 131 89 148 104 161 141 13 37 12 44 -5 80 -16 33 -32 46 -113 85 -51 26 -150 66 -220 89 -194 66 -234 92 -234 150 0 38 26 66 124 135 218 153 340 398 340 680 0 161 -45 287 -152 428 -181 239 -398 365 -702 406 -103 14 -142 13 -267 -9z"/>
</g>
</svg></div>
<div class="box" id="pawn"><svg xmlns="http://www.w3.org/2000/svg" version="1.0"width="100%" height="100%" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M6240 9660 c-210 -37 -369 -113 -507 -244 -142 -134 -246 -294 -278 -427 -19 -83 -19 -215 1 -319 42 -221 151 -394 326 -517 84 -59 128 -104 128 -132 0 -27 -37 -69 -78 -90 -21 -10 -93 -37 -162 -61 -141 -48 -277 -111 -315 -146 -19 -17 -25 -33 -25 -63 0 -66 17 -88 124 -159 273 -179 387 -297 461 -481 60 -148 91 -444 75 -725 -15 -251 -48 -401 -126 -561 -76 -159 -177 -271 -394 -438 -98 -75 -103 -83 -125 -182 -10 -47 -72 -98 -146 -120 -199 -58 -350 -173 -472 -358 -65 -97 -100 -178 -127 -290 -37 -154 -25 -237 46 -316 26 -29 44 -58 42 -68 -2 -10 -37 -36 -78 -58 -95 -53 -129 -95 -136 -166 -14 -146 92 -208 445 -259 805 -116 2540 -100 3129 29 214 47 282 98 282 211 0 83 -41 135 -150 190 -49 25 -70 45 -70 66 0 2 18 24 40 48 53 58 70 102 70 183 0 321 -278 690 -586 778 -128 37 -166 72 -185 167 -13 66 -7 59 -208 219 -181 144 -292 299 -360 504 -47 144 -62 256 -68 503 -10 422 37 637 182 830 63 84 138 148 313 267 131 89 148 104 161 141 13 37 12 44 -5 80 -16 33 -32 46 -113 85 -51 26 -150 66 -220 89 -194 66 -234 92 -234 150 0 38 26 66 124 135 218 153 340 398 340 680 0 161 -45 287 -152 428 -181 239 -398 365 -702 406 -103 14 -142 13 -267 -9z"/>
</g>
</svg></div>
<div class="box" id="pawn"><svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="100%" height="100%" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M6240 9660 c-210 -37 -369 -113 -507 -244 -142 -134 -246 -294 -278 -427 -19 -83 -19 -215 1 -319 42 -221 151 -394 326 -517 84 -59 128 -104 128 -132 0 -27 -37 -69 -78 -90 -21 -10 -93 -37 -162 -61 -141 -48 -277 -111 -315 -146 -19 -17 -25 -33 -25 -63 0 -66 17 -88 124 -159 273 -179 387 -297 461 -481 60 -148 91 -444 75 -725 -15 -251 -48 -401 -126 -561 -76 -159 -177 -271 -394 -438 -98 -75 -103 -83 -125 -182 -10 -47 -72 -98 -146 -120 -199 -58 -350 -173 -472 -358 -65 -97 -100 -178 -127 -290 -37 -154 -25 -237 46 -316 26 -29 44 -58 42 -68 -2 -10 -37 -36 -78 -58 -95 -53 -129 -95 -136 -166 -14 -146 92 -208 445 -259 805 -116 2540 -100 3129 29 214 47 282 98 282 211 0 83 -41 135 -150 190 -49 25 -70 45 -70 66 0 2 18 24 40 48 53 58 70 102 70 183 0 321 -278 690 -586 778 -128 37 -166 72 -185 167 -13 66 -7 59 -208 219 -181 144 -292 299 -360 504 -47 144 -62 256 -68 503 -10 422 37 637 182 830 63 84 138 148 313 267 131 89 148 104 161 141 13 37 12 44 -5 80 -16 33 -32 46 -113 85 -51 26 -150 66 -220 89 -194 66 -234 92 -234 150 0 38 26 66 124 135 218 153 340 398 340 680 0 161 -45 287 -152 428 -181 239 -398 365 -702 406 -103 14 -142 13 -267 -9z"/>
</g>
</svg></div>
<div class="box" id="pawn"><svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="100%" height="100%" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M6240 9660 c-210 -37 -369 -113 -507 -244 -142 -134 -246 -294 -278 -427 -19 -83 -19 -215 1 -319 42 -221 151 -394 326 -517 84 -59 128 -104 128 -132 0 -27 -37 -69 -78 -90 -21 -10 -93 -37 -162 -61 -141 -48 -277 -111 -315 -146 -19 -17 -25 -33 -25 -63 0 -66 17 -88 124 -159 273 -179 387 -297 461 -481 60 -148 91 -444 75 -725 -15 -251 -48 -401 -126 -561 -76 -159 -177 -271 -394 -438 -98 -75 -103 -83 -125 -182 -10 -47 -72 -98 -146 -120 -199 -58 -350 -173 -472 -358 -65 -97 -100 -178 -127 -290 -37 -154 -25 -237 46 -316 26 -29 44 -58 42 -68 -2 -10 -37 -36 -78 -58 -95 -53 -129 -95 -136 -166 -14 -146 92 -208 445 -259 805 -116 2540 -100 3129 29 214 47 282 98 282 211 0 83 -41 135 -150 190 -49 25 -70 45 -70 66 0 2 18 24 40 48 53 58 70 102 70 183 0 321 -278 690 -586 778 -128 37 -166 72 -185 167 -13 66 -7 59 -208 219 -181 144 -292 299 -360 504 -47 144 -62 256 -68 503 -10 422 37 637 182 830 63 84 138 148 313 267 131 89 148 104 161 141 13 37 12 44 -5 80 -16 33 -32 46 -113 85 -51 26 -150 66 -220 89 -194 66 -234 92 -234 150 0 38 26 66 124 135 218 153 340 398 340 680 0 161 -45 287 -152 428 -181 239 -398 365 -702 406 -103 14 -142 13 -267 -9z"/>
</g>
</svg></div>
<div class="box" id="pawn"><svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="100%" height="100%" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M6240 9660 c-210 -37 -369 -113 -507 -244 -142 -134 -246 -294 -278 -427 -19 -83 -19 -215 1 -319 42 -221 151 -394 326 -517 84 -59 128 -104 128 -132 0 -27 -37 -69 -78 -90 -21 -10 -93 -37 -162 -61 -141 -48 -277 -111 -315 -146 -19 -17 -25 -33 -25 -63 0 -66 17 -88 124 -159 273 -179 387 -297 461 -481 60 -148 91 -444 75 -725 -15 -251 -48 -401 -126 -561 -76 -159 -177 -271 -394 -438 -98 -75 -103 -83 -125 -182 -10 -47 -72 -98 -146 -120 -199 -58 -350 -173 -472 -358 -65 -97 -100 -178 -127 -290 -37 -154 -25 -237 46 -316 26 -29 44 -58 42 -68 -2 -10 -37 -36 -78 -58 -95 -53 -129 -95 -136 -166 -14 -146 92 -208 445 -259 805 -116 2540 -100 3129 29 214 47 282 98 282 211 0 83 -41 135 -150 190 -49 25 -70 45 -70 66 0 2 18 24 40 48 53 58 70 102 70 183 0 321 -278 690 -586 778 -128 37 -166 72 -185 167 -13 66 -7 59 -208 219 -181 144 -292 299 -360 504 -47 144 -62 256 -68 503 -10 422 37 637 182 830 63 84 138 148 313 267 131 89 148 104 161 141 13 37 12 44 -5 80 -16 33 -32 46 -113 85 -51 26 -150 66 -220 89 -194 66 -234 92 -234 150 0 38 26 66 124 135 218 153 340 398 340 680 0 161 -45 287 -152 428 -181 239 -398 365 -702 406 -103 14 -142 13 -267 -9z"/>
</g>
</svg></div>
<div class="box" id="pawn"><svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="100%" height="100%"  viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M6240 9660 c-210 -37 -369 -113 -507 -244 -142 -134 -246 -294 -278 -427 -19 -83 -19 -215 1 -319 42 -221 151 -394 326 -517 84 -59 128 -104 128 -132 0 -27 -37 -69 -78 -90 -21 -10 -93 -37 -162 -61 -141 -48 -277 -111 -315 -146 -19 -17 -25 -33 -25 -63 0 -66 17 -88 124 -159 273 -179 387 -297 461 -481 60 -148 91 -444 75 -725 -15 -251 -48 -401 -126 -561 -76 -159 -177 -271 -394 -438 -98 -75 -103 -83 -125 -182 -10 -47 -72 -98 -146 -120 -199 -58 -350 -173 -472 -358 -65 -97 -100 -178 -127 -290 -37 -154 -25 -237 46 -316 26 -29 44 -58 42 -68 -2 -10 -37 -36 -78 -58 -95 -53 -129 -95 -136 -166 -14 -146 92 -208 445 -259 805 -116 2540 -100 3129 29 214 47 282 98 282 211 0 83 -41 135 -150 190 -49 25 -70 45 -70 66 0 2 18 24 40 48 53 58 70 102 70 183 0 321 -278 690 -586 778 -128 37 -166 72 -185 167 -13 66 -7 59 -208 219 -181 144 -292 299 -360 504 -47 144 -62 256 -68 503 -10 422 37 637 182 830 63 84 138 148 313 267 131 89 148 104 161 141 13 37 12 44 -5 80 -16 33 -32 46 -113 85 -51 26 -150 66 -220 89 -194 66 -234 92 -234 150 0 38 26 66 124 135 218 153 340 398 340 680 0 161 -45 287 -152 428 -181 239 -398 365 -702 406 -103 14 -142 13 -267 -9z"/>
</g>
</svg></div>


</div>
</body>

</html>

在将典当SVG设置为背景时，您将取消其他背景设置——在本例中是交替正方形的背景。

背景颜色和背景图像的更明确设置将确保颜色不会被覆盖。SVG本身具有透明的背景，因此正方形的背景颜色将显示出来。

为了确保，无论作品的SVG的纵横比如何，它都在正方形中使用包含而不是覆盖，并将背景图像设置为不重复和居中。

body {
background-color: grey;
}
.main {
height: 50vmin;
width: 50vmin;
margin: 10% 15%;
background: white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.box {
height: 100%;
width: 100%;
border: 1px solid black;
}
.box:nth-child(even) {
background-color: burlywood;
}
#pawn {
background-image: url(https://svgsilh.com/svg/3413417.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}

<div class="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
<div class="box" id="pawn"></div>
</div>

body {
background-color: grey;
width: 100vw;
height: 100vh;
}
main {
height: 100px;
width: 450px;
margin: 10% 15%;
background: white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.box {
height: 48px;
width: 48px;
border: 1px solid black;
}
.box:nth-child(even) {
background: burlywood;
}
img{
width:100%;
height:100%;
}

<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<main>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
<div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
</main>
</body>
</html>

给定的代码中还有其他问题。您可能想研究使用vmin作为一个单元来定义正方形(因为无论视口的纵横比如何，这都将确保响应性(，而且网格的使用有点奇怪(需要9个文件(。可以更容易地将布局与棋盘联系起来，方法是删除网格，并在具有类等级的div中包含8个正方形。这将使着色更简单，并确保布局是方形的，在未来添加更多等级时应该会有所帮助。然而，所有这些都是另一个问题的子问题。

相关内容

最新更新

热门标签：