CSS | Спрайты изображений

Опубликовано: 4 Февраля, 2022

По сути, это изображение, которое представляет собой набор различных изображений, объединенных в единое изображение. Использование спрайтов изображений осуществляется по двум основным причинам:

Для более быстрой загрузки страницы, так как используйте только одно изображение.
Это уменьшает полосу пропускания, используемую для загрузки нескольких изображений. Таким образом потребляется меньше данных.

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

Используемое изображение:

Example:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #navlist {
                position: relative;
            }            
            #navlist li {
                margin: 0;
                padding: 0;
                list-style: none;
                position: absolute;
                top: 0;
            }            
            #navlist li, #navlist a {
                height: 100px;
                display: block;
            }           
            .gfg {
                width: 100px;
                left:0px;
                background: url(
"https://media.geeksforgeeks.org/wp-content/uploads/icon.png") -0px -0px;
            }
            .gfg1 {
                width: 100px; 
                left:120px;
                background: url(
"https://media.geeksforgeeks.org/wp-content/uploads/icon.png") -0px -140px;
            }
            .gfg2 {
                width: 100px; 
                left:240px;
                background: url(
"https://media.geeksforgeeks.org/wp-content/uploads/icon.png") -300px -140px;
            } 
        </style>
    </head>
    <body>
        <ul id="navlist">
            <li class = "gfg"><a href="#"></a></li>
            <li class = "gfg1"><a href="#"></a></li>
            <li class = "gfg2"><a href="#"></a></li>
        </ul>
    </body>
</html>                                    

Выход:

Picked HTML CSS

CSS | Спрайты изображений

РЕКОМЕНДУЕМЫЕ СТАТЬИ