【发布时间】：2021-05-26 05:01:48
【问题描述】：
我正在制作一个棋盘，我的主要问题是在我设置了棋盘的前两行之后，典当的插入会改变深色方块的颜色。
所以棋盘具有“main”类并且颜色为白色，正方形 (class="box) 的颜色与棋盘相同（白色）或棕色。组件（棋子）是 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>【问题讨论】：
-
#ids 必须是唯一的。所以为每个棋子重做#id。 （例如pawn1、pawn2等）。此外，background-size: cover将使图像拉伸到其容器的所有侧面，从而覆盖它。 -
顺便说一句，你真的看到你的例子的结果了吗？它与描述的完全不同。
-
在可视化代码或 jsfiddle 上试试。它不适用于 sn-p。
-
将链接发布到小提琴。
-
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;将组成 9 列 -- 棋盘有 8 列。