使用可伸缩CSS Spritesheet

Use Scalable CSS Spritesheet

本文关键字：Spritesheet CSS 可伸缩      更新时间：2023-09-26

我想为我的图标使用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>

更新以解决裁剪问题

以下是使用伪元素的解决方案

.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>

相关文章：