我想为我的图标使用 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>
关于javascript - 使用可扩展的 CSS Spritesheet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36253723/