Используйте Scalable CSS Spritesheet

Question

Я хочу использовать CSS Spritesheet для моих значков. Каждое изображение значка имеет размер 48x48 пикселей. Тем не менее, я хочу иметь возможность отображать значки с произвольным размером.

Прямо сейчас, я использую, чтобы отобразить значок 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.

\t .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"> 
 
\t <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>