Один файл изображения для хранения всех маленьких изображений на странице

Question

В одном из недавних Stackoverflow подкастов Джефф говорил о том, чтобы иметь один файл изображения, содержащий все эти крошечные изображения по всей странице, а затем вырезать его с помощью CSS, чтобы отображались все изображения правильно. Весь смысл в том, чтобы уменьшить количество запросов к серверу, чтобы страница загружалась быстрее. Я был как "вау, это действительно круто, я мог бы действительно использовать это в нашем продукте".

Мой вопрос: Как это сделать с помощью CSS? Мне нужно загрузить изображения с background-image, но тогда как мне указать смещение подизображения в большом изображении? То есть предположим, что на большом изображении есть значок молотка (50px, 50px), и он имеет размер 32px * 32px. Как заставить браузер отображать только этот бит?

Answer 1

В основном вы используете свое одиночное изображение в качестве фонового изображения, но перемещаете его (влево и вверх) на смещение изображения, которое вы хотите отобразить. Например. для отображения значка молотка:

.hammer
{
  background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}

Но, насколько мне известно, вы должны убедиться, что элемент, использующий фоновое изображение, имеет правильный размер (например, 32x32 px).

Поиск CSS Sprites даст вам больше информации.

Answer 2

Это называется css sprites .

Я, по сути, старый трюк, используемый в программировании игр, когда вы загружаете одно растровое изображение, содержащее все «состояния» некоторого элемента, который вам нужно нарисовать, преимущество в том, что таким образом изображение загружается предварительно, и нет никакой задержки, когда вам нужно фактически используйте его, в случае css, он обычно реализуется с помощью изображения в качестве фона для элемента и применения различных смещений и границ для классов: hover,: active и "normal".

Больше информации в блоге stackoverflow

Вот хороший генератор: http://www.csssprites.com/

Answer 3

Вы знаете ответ ... в этом случае попросите Google взглянуть на источник страницы результатов поиска Google с помощью такого инструмента, как firebug, и вы найдете

.w10 
 background-position:-152px 0;
}
.w10, .w11, .w20, .w21, .w24, .wci, .wpb 
 background:transparent url(/images/nav_logo4.png) no-repeat scroll 0 0;
 border:0 none;
 cursor:pointer;
 height:16px;
 margin-left:8px;
 vertical-align:bottom;
 width:16px;
}

Так что все w10, w11, w20 и т. Д. Имеют одно и то же изображение (nav_logo4.png), все имеют фиксированную высоту и ширину. и все указывают (разные) фоновые позиции.