CSS: использование спрайтов изображений с псевдо-классами css: before и: after

Я никогда раньше этого не пробовал. Я создал спрайт изображения, содержащий два значка. Каждый значок имеет ширину 26 пикселей и высоту. Таким образом, спрайт 26x52px.

У меня есть элемент, который находится либо в div.something, либо в div.anything. В зависимости от того, в каком классе я хочу добавить угловую крышку влево или вправо.

Итак, поэтому я позиционирую относительный элемент .element, применяя псевдографический код :before к img и устанавливаю его абсолютным с высотой и шириной 26 пикселей, поэтому подходит только один значок спрайта. Я также применяю "переполнение": hidden ", чтобы скрыть второй значок спрайта.

.element {
    position:relative;
}

.element:before{
    content: url("../images/sprite.png");
    position: absolute;
    height:26px;
    width:26px;
    overflow:hidden;
}

.something .element:before {
    top: -2px;
    left: -2px;
}

anything .element:before {
    top: -28px;
    right: -2px;
}

Это отлично работает для левого угла, где я использую первую верхнюю иконку в спрайте. Однако теперь мне интересно, как я могу показать только вторую икону в спрайте для "ничего.элемент".

Итак, фактически "маска" должна быть расположена на -2px, -2px, но спрайт img внутри должен начинаться с -26px, поэтому отображается второй значок.

Возможно ли это с помощью CSS, как я это делаю прямо сейчас?

Ответ 1

Не используйте content для вставки изображения, так как вы не можете изменить его положение. Вместо этого установите содержимое " " и добавьте спрайт в качестве фонового изображения. Затем вы можете использовать свойство background-position для перемещения спрайта в правильное положение. В противном случае ваш пример должен работать нормально.

Рабочая демонстрация:

http://jsfiddle.net/RvRxY/1/

Ответ 2

Поддержка: до и: после псевдоэлементов на тегах img ограничена, если вообще существует в большинстве браузеров.

Лучшим решением было бы разместить ваш img внутри div, а затем применить класс к фактическому div, а не к img.

У вас почти правильное использование псевдоэлемента. Вы можете попробовать:

.somediv { position:relative;}

.somediv:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  top: 0;
}

.somediv.foo1:before { 
  background: url("../images/sprite.png") no-repeat -2px -2px;
  left: 0;
}

.somediv.foo2:before { 
  background: url("../images/sprite.png") no-repeat -2px -28px;
  right: 0;
}

Используйте фон:; свойство, а не контент:; чтобы вы могли расположить спрайт внутри: перед псевдоэлементом.

левый:; правильно:; и top:; должен использоваться для абсолютного позиционирования псевдоэлемента относительно его родителя (.somediv).

Размещение границы 1px вокруг вашего псевдоэлемента поможет вам понять различное позиционирование:)