如何使用背景 url CSS 创建图像类 [重复]答案

【问题标题】：How to create image classes with background url CSS [duplicate]如何使用背景 url CSS 创建图像类 [重复]
【发布时间】：2020-10-06 08:18:19
【问题描述】：

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

例如，<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 属性？

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

【问题讨论】：

你必须添加px。试试background: url(/imgs/pieces.png) 133.33333333333334px 0;
副本将提供一个通用解决方案，您可以轻松定义每个部分并按照您的需要缩放它们

标签： html css

【解决方案1】：

您可能想要拆分您的类，因此您的.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>

【讨论】：