css - 使用 CSS 从 sprite 调整图像大小

Question

我有一个 CSS sprite，其中包含大小为 32x32 像素的各种图标。

现在我需要的是以 20x20 像素大小显示其中一个图标。我尝试了一些方法，例如将大小设置为 20px、使用 background-size:cover 或使用 transform:scale(0.625) - 但我的尝试都没有给出我想要的结果。

用于我的测试的 HTML:

32px icons:

<div class="sprite" style="background-position:0px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div>
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div>

<hr>
20px icons (attempts):

<div class="sprite" style="background-position:32px 64px; width:20px; height:20px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; background-size:cover;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; transform:scale(0.625);">&nbsp;</div>

用于我的测试的 CSS:

.sprite {
  background-image:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png);
  width:32px;
  height:32px;
}

请看看这个 fiddle ，看看我试过什么:

https://jsfiddle.net/dfqh0yrc/4/

Answer 1

您只能使用没有width 和height 的scale，如下所示:

.sprite {
  background:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png);
  width:32px;
  height:32px;
}

32px icons:
<div class="sprite" style="background-position:0px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div>
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div>
<hr>
20px icons (attempts):
<div class="sprite" style="background-position:32px 64px; transform:scale(0.625);">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20 / 32));">&nbsp;</div>

您还可以使用 calc 来计算比例因子，如下所示:

<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20 / 32));">&nbsp;</div>

Demo on JSFiddle: https://jsfiddle.net/dfqh0yrc/5/