Использование CSS-спрайтов в тегах привязки - PullRequest
Новая
       28

Использование CSS-спрайтов в тегах привязки

6 голосов
/ 18 мая 2011

Я ищу несколько советов гуру CSS по лучшей структуре.Я использую спрайты вместо значков в горизонтальном «списке».Текущий HTML-код выглядит так: 

<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>

и т. Д.

Так что я заменяю на спрайт.Я использую 

<a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>

, но для этого я даю тег inline-block и width.Мне никогда не нравился inline-block, и это кажется неуклюжим.

Есть ли лучшие варианты?(вложенный span, div-обертка?)

Ответы [ 3 ]

8 голосов
/ 18 мая 2011

@ karishma: inline-block хороший вариант, но если вы этого не хотите, вы можете использовать CSS ниже.

a.sprite_img_a{
  background:url('image.jpg') no-repeat 0 0 ;
  float:left;
  display:block;
  width:30px;
  height:30px;
}
a.sprite_img_a:hover{
  background-position:-20px 10px ;
}

Хорошо использовать изображение значка в фоновом режиме, потому что 1) оно экономит пространство разметки и 2) это хорошо для целей SEO, чтобы избежать нежелательных кэшей изображений от Google.

0 голосов
/ 21 июня 2011

Мне нравятся ваши приемы @sandeep и @ hatake-kakashi. Пара возможных улучшений (хотя, возможно, выходящих за рамки вопроса). Попробуйте структурировать свой список и HTML как таковой: 

<style>
/* let your UL and LI handle the link positioning */
ul.sprites {width:somevalue;} /* <--clearfix this someplace cause of the floats inside*/
ul.sprites li {float:left;} /* <- these should collapse to the 30x30 width of the children */
ul.sprites li a {
  display:block;
  /*sprite dimensions*/
  width:30px;
  height:30px;
  background: url('..images/spritesSheet.png') 0 0 no-repeat;
  /*hide link text*/
  text-indent: -9999em
  overflow: hidden;
  text-align: left;
}

/*adjust the background of the single sprite image file*/
ul.sprites a.spriteName1 {background-position:x y;}
ul.sprites a.spriteName1:hover {background-position:x y;}
ul.sprites a.spriteName2 {background-position:x y;}
ul.sprites a.spriteName2:hover {background-position:x y;}
/* etc...*/

</style>
<html>
<ul class="sprites">
    <li><a class="spriteName1" href="#">link1</a></li>
    <li><a class="spriteName2" href="#">link2</a></li>
</ul>
</html>

Таким образом, каскад работает для вас, и все ссылки в этом списке могут получить стиль спрайта без избыточных имен классов. И вы позволяете своим родительским элементам управлять позиционированием. По крайней мере, я думаю, что это правильно. Извиняюсь за синтаксис и псевдокод, как я его написал, довольно быстро и грязно.

0 голосов
/ 18 мая 2011

Я обычно делаю так: 

<a class="button sprite" href="#"><span class="sprite">Blah</span></a>

Вот css: 

.sprite{
    background: url("../images/sprite.png") no-repeat scroll left top transparent;
}
.button{
    background-position: 0 -80px;
    color: white;
    display: block;
    float: left;
    font-size: 0.75em;
    height: 28px;
    line-height: 28px;
    margin-top: 7px;
    overflow: hidden;
    padding-left: 5px;
    text-decoration: none;
    cursor: pointer;
}
.button span{
    background-position: right -80px;
    height: 28px;
    color: white;
    display: block;
    float: left;
    padding: 0 10px 0 5px;
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
}
...