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

9

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

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

alistapart.com/articles/sprites - статья, к которой я отсылаю людей Assembler

Ваш Ответ

3   ответа
3

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

4

CSS спрайты.

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

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

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

10

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

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

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

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

Большое спасибо! Вы выиграли один Интернет! Tamas Czinege
Спасибо, где я могу скачать его? M4N

Похожие вопросы