javascript - 使用可扩展的 CSS Spritesheet

Question

我想为我的图标使用 CSS Spritesheet。每个图标图像的大小为 48x48px。但是，我希望能够显示任意尺寸的图标。

现在，我正在使用，显示一个 24x24 图标，我使用:

<div style="width:24px;height:24px;display:inline-block">
<div class="tab-achievement sprite" style="transform:scale(0.5);transform-origin:0 0"></div>
</div>

有没有更短的方法呢？例如，通过使用 ::before和 ::after .

最终，我想要这样的东西:

<div class="img24x24 tab-achievement sprite"></div>

演示目标:使用 Hello World 显示正确的图标。

	.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(http://puu.sh/nWh8y.png);}

.tab-achievement {width:48px; height:48px; background-position: -48px -48px}

<div>
<div style="width:24px;height:24px;display:inline-block">
	<div class="tab-achievement sprite" style="transform:scale(0.5);transform-origin:0 0"></div> 
</div> <span>Hello World.</span>
</div>

Answer 1

已更新以解决裁剪问题

这是一个使用伪元素的解决方案

.sprite:before {
  content: ' ';
  display: inline-block;
  overflow: hidden;
  background: url(http://puu.sh/nWh8y.png) no-repeat;
  width:48px;
  height:48px;
  transform-origin:0 0;
}
.sprite:after {
  content: attr(data-text);
}
.tab-achievement:before {
  background-position: -48px -48px;
}
.tab-locker:before {
  background-position: -48px 0;
}
.img24x24:before {
  transform: scale(0.5);
}
.img36x36:before {
  transform: scale(0.75);
}

<div class="img24x24 tab-achievement sprite">
  <span>Hello World.</span>
</div>

<div class="img36x36 tab-achievement sprite">
  <span>Hello World.</span>
</div>

<div class="tab-achievement sprite">
  <span>Hello World.</span>
</div>

<hr>

<div class="img36x36 tab-locker sprite" data-text="Hello World - pseudo only">
</div>