Как использовать CSS спрайты?

Question

Я пытаюсь выяснить, как использовать спрайты CSS на изображении спрайта с 4 спрайтами.

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

Это изображение:

Как показать два последних?Как показать 3-й и 4-й спрайт под себя?

Answer 1

HTML

<div class="container">
    <ul>
        <li id="belt-1"></li>
        <li id="belt-2"></li>
        <li id="belt-3"></li>
        <li id="belt-4"></li>
    </ul>
</div>

CSS

.container {
    position: relative;
    width: 600px;
    height: 600px;
}

.container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.container ul li {
    background-image: url(https://i.stack.imgur.com/SBxX4.png);
    margin-bottom: 20px;
    width: 150px;
    height: 78px;
    background-size: auto 286px;
    background-position: 0 0;
}

.container ul li#belt-2 {
    background-position-y: 210px;
}

.container ul li#belt-3 {
    background-position-y: 123px;
    height: 58px;
}

.container ul li#belt-4 {
    background-position-y: 66px;
    height: 58px;
}

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

Я создаю базовый пример CSS-спрайтов, надеюсь, это поможет вам.

Answer 2

Вот очень простой пример с двумя последними изображениями. Я рекомендую вам поиграть в этой скрипке с .block s width, height и background-position. Последние два числа в свойстве background позволяют определить, сколько изображений будет отображаться.

.container {
  position: relative;
  width: 600px;
  height: 600px;
}

.container .block {
  background: url(https://i.stack.imgur.com/SBxX4.png) -85px -420px;
  width: 310px;
  height: 250px;
}

<div class="container">
  <div class="block">

  </div>
</div>

Вы можете поиграть с ним на JSFiddle