0

我正在制作国际象棋游戏，我想创建不同的类来显示不同的背景图像。

例如，<div class="pawn"></div>应该有一个棋子的背景图像。（棋子是棋子）。这是我所拥有的：

.king {
  width:80px;
  height:80px;
  background:url(/imgs/pieces.png) 0px 0px;
}
.queen {
  width:80px;
  height:80px;
  background:url(/imgs/pieces.png) 133.33333333333334px 0px;
}

类王工作虽然它太大了。但是班女王没有出现。我测量了尺寸，每件的尺寸是 133px。那么我background是否正确使用了该属性？

这是我正在使用的精灵表：这个

4

1 回答 1

2

你可能想把你的班级分开，所以你的.piece班级有每件作品的所有共同规则，并将你的“作品类型”班级限制为background-position-x财产。然后，您可以为黑色和白色件添加第三类。.king我为和类添加了样式规则.white，但由于它们都具有默认的 background-x 和 y 位置，因此它们不是必需的。

body {
  display: flex
}

body>div {
  border: solid 1px #333
}

.piece {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Chess_Pieces_Sprite.svg/800px-Chess_Pieces_Sprite.svg.png);
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-size: 467px auto;
}

.king {
  background-position-x: 0px;
}

.queen {
  background-position-x: -77px;
}

.white {
  background-position-y: 0px;
}

.black {
  background-position-y: -79px;
}
<div class='piece king white'></div>
<div class='piece queen white'></div>
<div class='piece queen black'></div>

于 2020-06-16T16:43:59.753 回答