Должны ли изображения CSS Sprite иметь X промежутков между каждым элементом? - PullRequest
Новая
       33

Должны ли изображения CSS Sprite иметь X промежутков между каждым элементом?

11 голосов
/ 17 ноября 2011

У меня проблема, какое-то время я пытался выяснить, как решить эту проблему. Я опишу это очень хорошо ниже ...

Я пытаюсь использовать изображение в качестве изображения спрайта для списка UL. На нем должен отображаться значок с текстом рядом, и значок, и текст должны указывать куда-то.

Мой первый пример выглядит так, как я хочу. Когда font-size установлен на 10px, все выглядит нормально ... sprite ok

Как только я изменю font-size с 10px на 16px ...

sprite not ok

Вот CSS и HTML

CSS 

#post-meta-wrapper{
    list-style: none;
    margin:20px 0 20px 20px;
    width:400px;
}

#post-meta-wrapper li {
    width:100%;
    color: #44495B;
    border-top: 1px dotted #CCC;
    color: #999;
    font-size: 10px;
    line-height: 28px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-indent: 0px;
}
#post-meta-wrapper li a{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    padding-left:15px;
}

#post-meta-wrapper .meta-img {
    background:#fff;
    width: 15px;
    height: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 8px;
    overflow: hidden;
}

#post-meta-wrapper a:hover,
#post-meta-wrapper .active{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px;
    width: 15px;
    height: 10px;
}

HTML 

<ul id="post-meta-wrapper">
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#" class="active"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>

</ul>

Примеры JSFiddle

Это первый с font-size: 10px http://jsfiddle.net/jasondavis/Mt87G/4/

Это MESSED UP с font-size: 16px http://jsfiddle.net/jasondavis/Mt87G/5/

Помогите мне?

Хорошо, я знаю, что я мог бы просто изменить изображение спрайта так, чтобы вокруг каждого объекта на изображении были огромные пространства, и тогда вы не заметите эту проблему, но я действительно хотел бы решить эту проблему правильным способом. Я имею в виду, возможно ли сделать то, что я пытаюсь сделать, только с помощью CSS, или изображение должно быть разнесено? Я видел другие спрайт-изображения, где они вместе, как у меня, и я видел некоторые, где все на расстоянии около 100 пикселей.

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

Ответы [ 6 ]

3 голосов
/ 18 ноября 2011

Я бы предложил использовать псевдоэлемент: before.Добавьте класс к своей якорной ссылке или элементу списка и стилизуйте элемент pseduo для хранения изображения спрайта.Это дает тот же эффект, что и возможность устанавливать определенный размер для диапазона, без необходимости дополнительной разметки. 

<li class="icon">
    <a href="#">Test Link<a/>
<li>

.icon:before{
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    /* other css for positioning */
}

Если вы хотите, чтобы значок был частью ссылки, предыдущий должен бытьна якоре.Это будет подчеркнуто, если якорь подчеркнут.

Если вы поместите его в li, ссылка все еще может быть подчеркнута без подчеркивания значка, но чтобы сделать его кликабельным, вам нужно поработать над магией с отступами на якорях.1008 * Примечание: Как упомянуто jimplode, это не будет работать в IE <= 7. Так что, если вам нужно, чтобы он работал там (печально для вас), лучше использовать дополнительную разметку. </p>

2 голосов
/ 17 ноября 2011
  1. Закрыть промежуток
  2. Установите width, height, float и margin-top этого промежутка для выравнивания с основанием высоты линии

Попробуйте это: http://jsfiddle.net/Mt87G/19/

CSS 

#first a{
     font-size: 10px;
     padding-left: 5px;
     line-height: 12px;
}
#second a{
    font-size: 22px;
    line-height: 25px;
    padding-left: 5px; 
}
.meta-img{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    width: 13px;
    height: 12px;
    float: left;
}
#first .meta-img{
    margin-top: 4px
}
#second .meta-img{
    margin-top: 7px
}

HTML 

<p id="first">
    <a href="#">
        <span class="meta-img"></span>Test link
    </a>  
</p>    

<p id="second">
    <a href="#">
        <span class="meta-img"></span>Test link
    </a> 
</p>
2 голосов
/ 17 ноября 2011

Я думаю, вы можете дать больше места между изображениями. Если у вас есть отдельные изображения, вы можете использовать http://spritegen.website -performance.org / для создания спрайтовых изображений, и вы можете предоставить пользовательское пространство между спрайтовыми изображениями.

Если вы динамически изменяете размер шрифта, то вы также можете использовать спрайт с большим пространством и изменять только положение фона.

2 голосов
/ 17 ноября 2011

Хорошо написанный вопрос! Я упростила ваши две примерные скрипки в одну скрипку:

http://jsfiddle.net/Mt87G/6/

Кажется, что в варианте 16px изображение просто показывает немного больше, так как высота строки становится больше из-за большего размера шрифта.

Отредактировано: очевидно, что SO также использует спрайты, см., Например, это изображение . Если я использую firebug для увеличения высоты строки, например, для кнопки «голосование», в какой-то момент начинает появляться следующий спрайт.

Итак, если вы последуете их примеру, кажется, вы могли бы:

  • установить фиксированную высоту для вашего элемента
  • оставить некоторое пространство между спрайтами, просто чтобы быть уверенным

Строгий ответ, хотя на ваш вопрос кажется «нет, не обязательно».

1 голос
/ 17 ноября 2011

Обычно я оставляю несколько пикселей между спрайтами из-за ошибок округления, которые я видел в мобильном Safari.Если между спрайтами всего 1 пиксель, иногда на краю элемента появляется полоса ширины волос следующего спрайта.Добавление немного больше буферной комнаты позволяет избежать этой проблемы.Если вы используете файлы PNG, на самом деле не так много дополнительного размера файла (чрезвычайно небольшое увеличение) с большим интервалом из-за способа их сжатия.

1 голос
/ 17 ноября 2011

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

...