Как установить фоновое положение с спрайтами?

Question

Привет и С Новым Годом: D Итак, вот проблема: я хочу показать 6 горячих воздушных шаров на странице со спрайтами. Фактический спрайт содержит 6 цветных шаров. Посмотрим код и результат.

HTML:

<div class="hotairballoons"> 
    <div class="ball-1"></div> 
    <div class="ball-2"></div> 
    <div class="ball-3"></div> 
    <div class="ball-4"></div> 
    <div class="ball-5"></div> 
    <div class="ball-6"></div> 
</div> 

CSS:

.hotairballoons > div[class^="ball-"] { 
    background: url(../img/sprites.png); 
    background-repeat: no-repeat; 
    width: 69px; 
    height: 110px; 
} 

.ball-1 { 
    background-position: 0px 0px; 
} 

.ball-2 { 
    background-position: -69px 0px; 
} 

.ball-3 { 
    background-position: -138px 0px; 
} 

.ball-4 { 
    background-position: 0px -110px; 
} 

.ball-5 { 
    background-position: -69px -110px; 
} 

.ball-6 { 
    background-position: -138px -110px; 
} 

Результат:

Что показывает в консоли разработчиков:

Почему это пересечение? Что я делаю не так?

Answer 1

Он отлично работает.

Но если вы хотите исправить консоль, вы должны добавить !important в конце каждого background-position!

Answer 2

В вашем стиле есть две вещи, которые нужно исправить.

CSS специфика

Селектор .hotairballoons > div[class^="ball-"] оценки 0 2 1. И селектор .ball-1 оценки 0 1 0. Те же правила, которые оценивают более высокие, переопределяют нижние. Вы можете использовать этот инструмент CSS Explain, чтобы проверить это.

правила CSS сокращенные

Свойство background является сокращенным правило, background-position является его частью, с начальным значением 0% 0%.

Правило .hotairballoons > div[class^="ball-"] {background:...;} переопределяет .ball-1 {background-position:...;}

Чтобы исправить это, вы можете объявить background как отдельные правила, так что они не получают переопределяется.

.hotairballoons > div[class^="ball-"] { 
    background-image: url(../img/sprites.png); 
    background-repeat: no-repeat; 
} 

И оставить background-position снята с охраны, а затем установить его в пределах каждого отдельного класса, как вы делали.

.ball-1 { 
    background-position: 0px 0px; 
} 
.ball-2 { 
    background-position: -69px 0px; 
} 

и т.д.