Спрайты CSS

Технология CSS Sprites - это метод уменьшения количества HTTP-запросов к ресурсам изображений, достигаемый объединением изображений в один файл.

Что такое спрайт-изображение

Подспрайты являются двумерными изображениями, которые состоят из комбинирования маленьких изображений в большое изображение под определенными координатами X и Y.

Чтобы отобразить отдельное изображение из комбинированного изображения, можно использовать CSS background-positionСвойства, определяющие точное положение изображения, которое нужно отобразить.

Преимущества использования CSS Image Sprite

Веб-страницы с множеством изображений, особенно с множеством маленьких изображений (например, иконки, кнопки и т.д.), могут долгое время загружаться и генерировать множество серверных запросов.

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

Смотрите следующий пример, вы увидите明显的 различие. Когда вы впервые положите указатель мыши на значок браузера в версии без Sprite, наведенное изображение появится через некоторое время, потому что наведенное изображение загружается с сервера при наведении мыши, так как обычное изображение и наведенное изображение являются двумя различными изображениями.

В версии Sprite, так как все изображения объединены в одном изображении, при наведении мыши на изображение будет моментально отображаться наведенное изображение, что создает гладкий эффект наведения. Использование CSS Sprite позволяет уменьшить количество HTTP-запросов, которые отправляет браузер на сервер, а также уменьшить общий размер файла, что提高了 доступность.

Сделать изображение спрайта

Мы объединяем 10 отдельных изображений в одно изображение (mySprite.png）изготовить этот спрайт-изображение. Вы можете использовать любую понравившуюся вам программу для редактирования изображений, чтобы создать свои собственные спрайты.

Отображение значков из изображения спрайта

В конце концов, с помощью CSS мы можем отображать только часть необходимого изображения спрайта.

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

.sprite {
　　　　background: url("images/mySprite.png") no-repeat;
}

Теперь我们必须 для каждого отображаемого элемента определить класс. Например, чтобы отобразить значок Internet Explorer, изображение спрайта будет CSS-кодом.

.ie　{}}
　　　　width:　50px;　/*　Icon　width　*/
　　　　height:　50px;　/*　Icon　height　*/
　　　　display:　inline-block;　/*　Display　icon　as　inline　block　*/
　　　　background-position:　0　-200px;　/*　Icon　background　position　in　sprite　*/
}

Теперь arose проблема, как мы можем получить эти пиксельные значенияbackground-positionКак мы можем найти ответы? Первый — это положение фонагоризонтальное положениевторая — это положение фонавертикальное положение. Поскольку левый верхний угол значка Internet Explorer касается левого края, его горизонтальное расстояние от точки начала (то есть от левого верхнего угла спрайта) составляет0и, поскольку он находится на5 мест,Таким образом, его вертикальное расстояние от точки начала позиции спрайта составляет 4 X 50px = 200px, потому что высота каждого значка составляет50px.

Чтобы показать значок Internet Explorer,我们必须 переместить его левый верхний угол в точку начала, то есть в левый верхний угол изображения спрайта (mySprite.png). Кроме того, поскольку вертикальное расстояние этого значка200pxСледовательно, нам нужно переместить весь фоновый изображение (mySprite.png) вверх200pxЭто требует, чтобы мы применяли значение как отрицательное.-200pxПотому что отрицательные значения позволяют ему двигаться вверх, а положительные значения позволяют ему двигаться вниз. Но он не требует горизонтального смещения, потому что у левого верхнего угла значка Internet Explorer нет пикселей.

Создание навигационного меню с использованием CSS Image Sprite

В предыдущем разделе мы学习了, как показывать отдельные иконки в спрайте изображения. Это simplest способ использования спрайта изображения, и теперь мы будем строить навигационное меню сЭффект перевороташаг вперед в навигационном меню.

Здесь мы будем использовать один и тот же спрайт изображения (mySprite.png）создать навигационное меню.

Основы навигационного HTML

Мы начнем с создания навигационного меню с использованием HTML нелистовая таблицаНачало навигационного меню.

<ul　class="menu">
　　　　<li　class="firefox"><a　href="#">Firefox</a></li>
　　　　<li　class="chrome"><a　href="#">Chrome</a></li>
　　　　<li class="ie"><a href="#">Explorer</a></li>
　　　　<li class="opera"><a href="#">Opera</a></li>
　　　　<li class="safari"><a href="#">Safari</a></li>
</ul>

Применение CSS к навигации

Ниже описано, как с помощью CSS преобразовать простый список без маркеров из примера в навигацию на основе спрайта.

Шаг 1: Сброс структуры списка

по умолчанию, HTML нелистотображается как маркеры. Нам нужно изменитьlist-style-typeсвойства установлены для удаления стандартного списка маркеров none.

ul.menu {
　　　　list-style-type: none;
}
ul.menu li {
　　　　padding: 5px;
　　　　font-size: 16px;
　　　　font-family: "Trebuchet MS", Arial, sans-serif;
}

Шаг 2: Настройка общих свойств для каждого ссылки

На этом шаге мы будем устанавливать все общие CSS-атрибуты, которые будут共有 для всех ссылок. Например:color,background-image,display,paddingи т.д.

ul.menu li a {
　　　　height: 50px;
　　　　line-height: 50px;
　　　　display: inline-block;
　　　　padding-left: 60px; /* Для того чтобы текст был виден на фоне изображения */
　　　　color: #3E789F;
　　　　background: url("images/mySprite.png") no-repeat; /* Все ссылки делят одно и то же фоновое изображение */
}

Шаг 3: Настройка стандартного состояния каждого ссылки

Теперь我们必须 для каждого элемента меню определить класс, так как каждый элемент в спрайте имеетbackground-positionНапример, иконка Firefox находится в начале изображения спрайта, то есть в левом верхнем углу, поэтому нет необходимости перемещать фоновое изображение. Таким образом, в этом случае вертикальное и горизонтальное положение фона будет равно 0. Аналогично, вы можете определить положение фона для других иконок внутри спрайта.

ul.menu li.firefox a {
　　　　background-position: 0 0;
}
ul.menu li.chrome a {
　　　　background-position: 0 -100px;
}
ul.menu li.ie a {
　　　　background-position: 0 -200px;
}
ul.menu li.safari a {
　　　　background-position: 0 -300px;
}
ul.menu li.opera a {
　　　　background-position: 0 -400px;
}

Шаг 4: Добавление состояния��ения для ссылок

Добавление состояния��ения и добавление вышеуказанных ссылок имеет один и тот же принцип. Достаточно просто переместить их верхний левый угол к началу изображения спрайта (т.е., верхний левый угол), как мы это сделали выше. Вы можетеbackground-positionПросто вычислите по следующей формуле:

Вертикальное положение состояния��ения = вертикальное положение в нормальном состоянии - 50px

Поскольку изображение мыши悬ится刚好 подefault状态下，высота каждого значка равна 50px. В состоянии悬ения значков также не требуется горизонтальный сдвиг, так как перед верхним левым углом значка нет пикселей.

ul.menu li.firefox a:hover {
　　　　background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
　　　　background-position: 0 -150px;
}
ul.menu li.ie a:hover {
　　　　background-position: 0 -250px;
}
ul.menu li.safari a:hover {
　　　　background-position: 0 -350px;
}
ul.menu li.opera a:hover {
　　　　background-position: 0 -450px;
}

Готово! После объединения整个过程, вот наш конечный код HTML и CSS: