Если на вашей странице будет очень много картинок: различных кнопок, иконок, элементов интерфейса, то ваша страница станет загружаться заметно дольше. Это связано с тем, что для загрузки каждой из картинок будет отправляться отдельный запрос. Можно сильно ускорить загрузку, если объединить их всех в одну большую картинку. Это называется CSS-спрайтами.
Здесь я покажу пример объединения трёх картинок в одну. Для начала нам нужно объединить их в одну с помощью какого-либо графического редактора: paint, Gimp или любого другого. Существуют сайты, которые позволяют сгенерировать CSS-спрайт на основе имеющихся у вас мелких изображений. Гуглите по запросу «генератор CSS-спрайтов». У меня есть вот такое изображение, состоящее из трёх других изображений:
Создадим простую HTML-страницу, где все они сначала будут вместе, потом — по отдельности:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title>HTML button formaction</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div> <p> Всё изображение целиком: <div class="buttons"></div> </p> <p> Картинка с яблоком: <div class="buttons applebutton"></div> </p> <p> Картинка с бумажкой: <div class="buttons paperbutton"></div> </p> <p> Картинка с дискетой: <div class="buttons diskbutton"></div> </p> </div> </body> </html> |
Обратите внимание на классы. В том месте, где все три картинки будут вместе, стоит класс buttons, а в тех местах, где они отдельно, стоят дополнительно другие классы. Вся магия будет в описании этих классов.
Для того чтобы отобразить все картинки вместе, класс buttons должен содержать атрибут background-image. Здесь всё просто. Для остальных классов нам нужно указать смещение в картинке, на котором находится нужное изображение. Это делается с помощью атрибута background-position. Для второй картинки мы сдвигаем позицию картинки на 32 пикселя влево, чтобы отобразить вторую картинку. Для третьей картинки мы сдвигаем позицию на 32 × 2 = 64 пикселя влево, чтобы левый край попал на начало третьей картинки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.buttons { background-image: url(buttons.png); width: 96px; height: 32px; } .applebutton { background-position: 0px 0px; width : 32px; height : 32px; } .paperbutton { background-position: -32px 0px; width : 32px; height : 32px; } .diskbutton { background-position: -64px 0px; width : 32px; height : 32px; } |
Работающий пример можно посмотреть по ссылке — https://urvanov.ru/projects/css-examples/image-tiles/index.html
Статья не действительна, картинка заплывает под другую картинка на background image, какой ещё есть способ?