Css Sprite вопрос, есть ли лучший способ? - PullRequest
Новая
       0

Css Sprite вопрос, есть ли лучший способ?

3 голосов
/ 04 декабря 2010

Я большой любитель спрайтов, но.Подумал, я делаю все длинной рукой, поэтому мне было интересно, был ли ярлык.

По сути, создать спрайт легко.Сделать работу со спрайтами легко, но делать много спрайтов становится трудоемким.

Так что мне стало интересно, каков самый чистый способ создания нескольких спрайтов, который я могу разместить в любом месте на наших веб-страницах.Я видел несколько листов спрайтов, похожих на иконки jquery ui, но у нас есть свои собственные иконки.Так что было интересно, если бы был более чистый метод.

Всего у нас будет около 16-20 спрайтов в наборе.Ниже приведен образец html и css. 

#logo-link
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/analytics.png);
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active  { background-position:0 0; }

#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/addlisting.png);
    background-position:0 32px;
}
#logo-link2:hover,#logo-link2:active    { background-position:0 0; }

html 

<a href="link1.html" id="logo-link"> </a>

<a href="link2.html" id="logo-link2"> </a>

Любые мысли по поводу улучшения наших спрайтов.Или мы должны создать спрайт-лист со всеми спрайтами?

Пример изображения:

alt text alt text

Добавлен базовый спрайт-лист по оси x

alt text

Пример:

alt text

Ok Ребята:

Пока у меня есть это в css: 

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/spritesheet.png);
}

.addlisting{background-position:0 32;}
.addlisting:hover{background-position:0 0;}
.addanalytics{background-position:64 32;}
.addanalytics:hover{background-position:64 0;}
.addprofile{background-position:32 32;}
.addprofile:hover{background-position:32 0;}

html У меня есть: 

<a href="link2.html" class="sprite addlisting"> </a>

<a href="link2.html" class="sprite addanalytics"> </a>

<a href="link2.html" class="sprite addprofile"> </a>

Что я действительно не понимаю (см. Spritesheet.png, который я сделал выше, почему профиль находится на координатах 32,32 и почему аналитика наординаты 64,32

Возможно, у меня неправильные координаты lol

Теперь это сводит меня с ума, argghhh

Добавлен фактический спрайтсейчас, но меня не устраивает, если я смогу заставить так играть по ординате со мной, смеется lol Изображение добавлено:

! [alt text] [5]

Наконец-то понял.

Ответы [ 4 ]

3 голосов
/ 04 декабря 2010

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

Также, что касается вашей таблицы стилей, может быть проще иметь класс мастер-ссылки, который устанавливает все, кроме свойства background-position. Это уменьшит размер CSS и упростит его изменение в будущем.

1 голос
/ 04 декабря 2010

Вы можете комбинировать селекторы следующим образом. 

#logo-link,#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active,#logo-link2:hover,#logo-link2:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

В качестве альтернативы вы можете добавить класс с именем sprite 

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
.sprite:hover,.sprite:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

И HTML 

<a href="link1.html" id="logo-link" class="sprite"> </a>

<a href="link2.html" id="logo-link2" class="sprite"> </a>

Редактировать : Вот еще один вариант, если вы планируете использовать спрайт-лист. 

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(spritesheet.png);
}
.analytics{background-position:0 0;}
.analytics:hover{background-position:0 0;}
.addlisting{background-position:0 0;}
.addlisting:hover{background-position:0 0;}

HTML: 

<a href="link2.html" class="sprite addlisting"> </a>

и jsfiddle http://jsfiddle.net/gJkCZ/

0 голосов
/ 04 декабря 2010

Это лучший способ, который я понял. В основном потому, что каждое изображение в главном меню (http://www.kintek.com.au) имеет разную ширину), я указываю ширину и положение фона в # id.

Css 

ul.menu li a{
    background: url(/images/menu/nav.png) no-repeat;
    height:77px;
    display:block;
    text-indent:-9999px;
}
a#home{width:73px;background-position:0 -3px;}
a#home:hover, a#home.selected {background-position:0 -83px;}

a#services{width:90px;background-position:-231px -3px;}
a#services:hover, a#services.selected {background-position:-231px -83px;}

Разметка 

<li><a id="home"?> title="Kintek Web Design, Brisbane">Home</a></li>
<li><a id="services" class="selected">Services</a>
0 голосов
/ 04 декабря 2010

Если вы работаете в asp.net, недавно была выпущена платформа, посвященная решению этой проблемы. Его называют ASP.NET Sprite & Image Optimization Framework:

Подход, который он использует, следующий:

  • Вы создаете изображения как обычные отдельные изображения
  • Фреймворк берет все ваши отдельные изображения, объединяет их в лист спрайта и генерирует для него css
...