Ограничение CSS спрайтов - PullRequest
Новая
       5

Ограничение CSS спрайтов

2 голосов
/ 08 февраля 2012

CSS Sprite полезен, помогает ускорить время загрузки и производительность.Но я считаю, что у них есть определенные ограничения.Мне нравится знать, есть ли способы обойти это или это присуще и что они ограничены.

Например: если бы я хотел, чтобы значок стрелки на моей якорной ссылке был справа: 

a 
  display:block;
  padding:0 15px 0 0;
  background:transparent ("/images/arrow.gif") no-repeat scroll right top;
}
a:hover {
  background-position:-10px top;
}

Это на самом деле не сработало бы, потому что я поместил значок стрелки нана правой стороне моего якорного тега.Но тогда как мне сместить изображение на 10 пикселей, если я все еще хочу расположить его справа?

1 Ответ

2 голосов
/ 08 февраля 2012

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

Вот пример того, как это сделать со спрайтом из 4 изображений, каждое из изображений имеет размер 18px * 18px (я только что нашел картинку в Интернете на изображениях Google, так что даже не знаю, как долгобудет доступно):

Чтобы увидеть пример живой версии: http://jsfiddle.net/Meligy/CLLau/

Важные биты кода: 

a:after {
    content: " ";
    display:inline-block;
    width:18px;
    height:18px;
    overflow:hidden;
    vertical-align:middle;
    margin-left:0.5em;
    background: url(http://www.waterbobble.com/skin/frontend/bobble/default/images/round_arrow_sprite.gif);
    background-position: 0 0;
}

a:hover:after {
    background-position: 18px 18px;
}

Обновление:

Это поддерживается во всех текущих браузерах, в IE поддерживается начиная с IE8.

Чтобы получить поддержку для IE 6, 7, проверьте этот другой ответ Stackoverflow:
: взломать псевдоэлементы after и: before для IE 7

...