这个简单的 CSS 和 html 国际象棋布局有什么问题？ （短代码）
What is wrong with this simple CSS and html chess layout? (Short code)
我正在制作棋盘，我的主要问题是在设置棋盘的前两行后，棋子的插入改变了深色方块的颜色。
因此棋盘有 class“主”并且颜色为白色，方块（class="框）与棋盘颜色相同（白色）或棕色。 component (pawn) 是一个 SVG。将 pawn 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>
如果您想让高度和宽度 % 起作用，您应该给它的父级一个高度和宽度，因为这就是它们将作为 100% 的高度和宽度。在这种情况下，您在 main 中有 % 但没有在 body 标签中说明宽度和高度。
在这种情况下你不能使用那些 % 所以我使用 static px 以便更快地完成它并且不重新构建 html.
您在背景方面遇到的问题是，当您将图像添加为背景时，它会覆盖之前的背景，因此为了获得带有样式背景的透明图像，您必须将其添加为内容 (img)具有该背景的容器。
我还为主要标签更改了 main class 并替换了 id pawn 因为你不应该有多个具有相同 id 的标签，换句话说，它应该是唯一的，如果你想使用更多，使用一个 class.
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 图片覆盖框 属性。
你可以通过将 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>
在将 pawn 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 个文件）。通过删除网格并将 8 个正方形包含在具有 class 等级的 div 中，可能更容易将布局与棋盘相关联。这将使着色更简单并确保布局是正方形的，并且在将来添加更多等级时应该会有所帮助。但是，所有这些都是不同问题的主题。
我正在制作棋盘，我的主要问题是在设置棋盘的前两行后，棋子的插入改变了深色方块的颜色。
因此棋盘有 class“主”并且颜色为白色，方块（class="框）与棋盘颜色相同（白色）或棕色。 component (pawn) 是一个 SVG。将 pawn 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>
如果您想让高度和宽度 % 起作用，您应该给它的父级一个高度和宽度，因为这就是它们将作为 100% 的高度和宽度。在这种情况下，您在 main 中有 % 但没有在 body 标签中说明宽度和高度。
在这种情况下你不能使用那些 % 所以我使用 static px 以便更快地完成它并且不重新构建 html.
您在背景方面遇到的问题是，当您将图像添加为背景时，它会覆盖之前的背景，因此为了获得带有样式背景的透明图像，您必须将其添加为内容 (img)具有该背景的容器。
我还为主要标签更改了 main class 并替换了 id pawn 因为你不应该有多个具有相同 id 的标签，换句话说，它应该是唯一的，如果你想使用更多，使用一个 class.
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 图片覆盖框 属性。
你可以通过将 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>
在将 pawn 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 个文件）。通过删除网格并将 8 个正方形包含在具有 class 等级的 div 中，可能更容易将布局与棋盘相关联。这将使着色更简单并确保布局是正方形的，并且在将来添加更多等级时应该会有所帮助。但是，所有这些都是不同问题的主题。