Разделение одной картинки на 3 части

219
10 декабря 2019, 06:20

Увидел на сайте разделение одной картинки на три разных блока, как это реализуется?

Три картинки в одной

Блоки на сайте

Answer 1

Это называется спрайты. Используется для сокращения количества обращений к серверу.

Допустим у нас есть спрайт размеров 32px x 64px, состоящий из двух картинок размером 32px x 32px.

<html>
<head>
    <style>
        #pic1 {
            /* размеры картинки */
            height: 32px;
            width: 32px;
            background: url(sprite.png);
            /* смещение картинки */
            background-position: 0 0;
        }
        #pic2 {
            /* размеры картинки */
            height: 32px;
            width: 32px;
            background: url(sprite.png);
            /* смещение картинки */
            background-position: 0 32px;
        }
    </style
</head>
<body>
    <p id="pic1"/>
    <p id="pic1"/>
</body>
</html>
Answer 2

Ну, например, можно так:

<html> 
    <head> 
        <title>img</title> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <style> 
            .img { 
                display: inline-block; 
                width: 100px; 
                height: 50px; 
                background-image: url(https://i.stack.imgur.com/6uS9Q.jpg); 
                background-repeat: no-repeat; 
                background-size: 100%; 
            } 
            .left { 
                background-position: left top; 
            } 
            .right { 
                background-position: left 50%; 
            } 
        </style> 
    </head> 
    <body> 
        <div class="img left"></div> 
        <div class="img right"></div> 
    </body> 
</html>

READ ALSO
После вывода функции из ооп она выдаёт unefinde
javascript

После вывода функции из ооп она выдаёт unefinde

Всем привет, помогите реализовать функцию checkErrorФункция постоянно выводит 1 и если вывести console

 136
Как сделать поочередную загрузку изображений
javascript

Как сделать поочередную загрузку изображений

У меня есть сайт, и на нем есть слайдер картинокПри загрузки страницы фотографии загружаются одновременно(к примеру смотришь первый слайд,...

 156
Как прописать в javascript путь к ресурсам
javascript

Как прописать в javascript путь к ресурсам

Работаю с картой leafletjs и в коде javascript использую ссылки на 2 иконкиИ если файлы иконок лежат вместе с тестовым html файлом все работает, но когда...

 140
Как создать кастомную строку поиска
javascript

Как создать кастомную строку поиска

Всем приветХочу создать кастомную строку поиска на карте, как, например, на maps

 175