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

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

16 голосов
/ 15 августа 2011

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

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

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

.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;
}

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

Таким образом, на самом деле «маска» должна располагаться в -2px, -2px, но спрайт img внутри должен начинаться с -26px, поэтому отображается второй значок.

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

Ответы [ 2 ]

26 голосов
/ 15 августа 2011

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

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

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

3 голосов
/ 15 августа 2011

Поддержка псевдоэлементов: before и: after для тегов 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;
}

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

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

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

...