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

Question

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

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

Answer 1

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

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

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

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

Answer 2

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

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

Там больше информации в stackoverflow Blog

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

Answer 3

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

.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), все имеют фиксированную высоту и ширину. и все указывают (разные) позиции backgroup-position.