Zen CSS и теги img

Question

Я пытаюсь быть более дзен в своем CSS, а также уменьшить нагрузку на мой сервер. Я слышал и вроде видел технику, где я могу использовать фоновое изображение и значение смещения, чтобы позволить мне загрузить все мои маленькие изображения значков в одном изображении и использовать CSS для отображения правильного изображения. Тем не менее, я немного запутался, как это сделать правильно. В частности, если у меня есть изображение 16x16, 48 пикселей в моем большом изображении, называемом img.png, я хочу что-то вроде этого:

<img style="background-image: url('img.png'); background-position: 48px" />

(Очевидно, что этот стиль включен в CSS, но для наглядности приведен здесь.)

Однако img игнорирует смещение. Если бы я использовал что-то вроде промежутка, я не уверен, как именно установить ширину промежутка (на самом деле я пытался, и это, казалось, игнорировало ширину.)

Любая помощь будет оценена.

Answer 1

Вы бы использовали тег, отличный от тега img, вам необходимо указать его размер, а положение фона должно быть отрицательным. Например, вы можете использовать тег div, так как по умолчанию это тег блока, поэтому вы можете указать для него размер:

<div style="width: 16px; height: 16px; background: url('img.png') -48px;"></div>

Если указать только одно смещение, его горизонтальное положение и вертикальное положение равны нулю. Если это вертикальное смещение, вы должны указать как горизонтальное, так и вертикальное смещение:

<div style="width: 16px; height: 16px; background: url('img.png') 0 -48px;"></div>

Answer 2

вы можете использовать этот инструмент для генерации спрайт-изображений, а также инструмент заботится о генерации CSS для вас

Answer 3

Вы думаете о CSS-спрайтах. Эта статья должна указать вам правильное направление.