Технология мозаичное изображение CSS

Разделить изображение

Сведите изображение представляет собой набор отдельных изображений.

Есть много изображений на странице может занять много времени для загрузки и генерирует несколько запросов сервера.

Используйте разделение образа сервера уменьшит количество запросов и сэкономить трафик.

Split изображения - простой пример

Вместо того чтобы использовать три отдельных изображений, так как мы используем это одно изображение ( "img_navsprites.gif"):

С помощью CSS, мы можем показать только часть изображения нам нужно.

В приведенном ниже примере показана часть указанного CSS "img_navsprites.gif" изображения:

Примеры анализа:

• <Img класс = "домашнего" SRC = "img_trans.gif" /> - потому что они не могут быть пустыми, атрибут SRC определяет только маленькое прозрачное изображение. Изображение, отображаемое будет мы указываем в CSS фоновых изображений
• Ширина: 46px; высота: 44px; - определенной части изображения, которые мы используем
• фон: URL (img_navsprites.gif) 0 0; - изготовление на заказ фоновое изображение и его положение (слева 0px, сверху 0px)

Это делается с помощью изображение расколоть самый простой способ, и теперь мы используем ссылки и парят эффекты.

Сведите изображение - для создания списка навигации

Мы хотим, чтобы использовать разделенное изображение ( "img_navsprites.gif"), чтобы создать список навигации.

Мы будем использовать список HTML, так как он может быть связаны между собой, а также поддерживает фоновое изображение:

Примеры анализа:

• #navlist {позиция: относительная;} - позиция устанавливается относительное позиционирование, позволяют абсолютное позиционирование внутри
• #navlist Li {маржа: 0; утеплитель: 0; список-стиль: нет; позиция: абсолютная; верх: 0;} - маржа и обивка устанавливается в 0, стиль списка удаляется, а все элементы списка являются абсолютное позиционирование
• #navlist ли, #navlist а {высота: 44px; Дисплей: блок;} - высота всех изображений 44px

Теперь каждая конкретная часть позиционирование и стиль:

• #home {Слева направо: 0px; ширина: 46px;} - расположен слева, а путь ширина изображения 46px
• #home {фон: URL (img_navsprites.gif) 0 0;} - изготовление на заказ фоновое изображение и его положение (слева 0px, сверху 0px)
• #prev {левый: 63px; ширина: 43px;} - на правом позиционирования 63px (#home ширина 46px + некоторое дополнительное пространство между элементами), шириной 43px.
• #prev {фон: URL ( 'img_navsprites.gif') -47px 0;} - изготовление на заказ фоновое изображение на правой 47px (#home делители ширина 46px + 1px)
• #next {левый: 129px; ширина: 43px;} - к правому позиционирования 129px (#prev 63px + ширина #prev составляет 43px + оставшееся пространство), ширина 43px.
• #next {фон: URL ( 'img_navsprites.gif') не повторять -91px 0;} - изготовление на заказ фоновое изображение на правой 91px (#home 46px + 1px разделительная линия + # предыдущая ширина 43px + 1px делители)

Свести изображения с - парить эффект

Теперь мы хотим, чтобы наш список навигации, чтобы добавить эффект парения.

	: Селектор эффект левитации для зависания над дисплеем элемента Селектор Совет :: зависать может быть применен ко всем элементам.

Наше новое изображение ( "img_navsprites_hover.gif") содержит три навигационных изображения и три изображения:

Потому что это одно изображение, а не шесть отдельный файл изображения, когда пользователь остается на изображении не будет задерживать загрузку.

Мы добавляем эффекты при наведении курсора добавить только три строки кода:

Примеры анализа:

• Поскольку элемент списка содержит ссылку, мы можем использовать: парить псевдо-класс
• #home а: зависать {фон: прозрачный URL (img_navsprites_hover.gif) 0 -45px;} - Для всех трех изображений при наведении мы указываем тот же положение фона, но затем вниз 45px каждый