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

Question

У меня есть спрайт, который я хочу использовать для определения класса, а не id:

Я хочу использовать белый, чтобы показать опцию расширения, и черный, чтобы показать расширенное состояние. Для не расширенного состояния у меня есть класс sprite-right и хочу использовать sprite-expanded для расширенного состояния. Кто-нибудь может направить меня через это? Я забыл вставить то, что я сделал... дух!

sprite-right
{
    overflow:hidden;
    width:16px;
    height:20px;
    cursor:pointer;
    background:transparent no-repeat 0 0;
    background-image:url('../images/arrows.gif');
}

Answer 1

Это довольно просто настроить. Сначала вам нужно установить класс для применения изображения в качестве фона. Затем добавьте конкретные классы для каждого значка. Затем в вашем CSS вы изменяете положение фона, высоту и ширину, чтобы соответствовать расположению каждого значка. Вот пример:

.icon {
    background-image: url('path/to/image.png');
    display: block;
}

.icon.sprite-right {
    background-position: 0 0;
    height: 10px; // You can change these for each sprite
    width: 10px; // You can change these for each sprite
}
.icon.sprite-expanded {
    background-position: -10px 0; 
}
.icon.sprite-right:hover  {
    background-position: -20px 0;
}
.icon.sprite-expanded:hover {
    background-position: -30px 0;
}

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

Answer 2

Есть много хороших учебников, если вы делаете поиск в Google. Я часто использую этот инструмент при работе с простыми спрайтами.

Проверьте эту ссылку: http://labs.engageinteractive.co.uk/nav-o-matic/

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

http://codepen.io/daugaard47/pen/lntzE

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

Надеюсь, это немного поможет.

Answer 3

Этот пост должен помочь: http://mindthesemicolon.com/using-css-sprites/ Он объясняет, как создавать и использовать спрайты, на примере с ручкой кода.