【问题标题】: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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-11-11
    • 2021-04-20
    • 2021-03-14
    • 2017-07-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-01
    相关资源
    最近更新 更多