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

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

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

Так было интересно, какой самый чистый способ сделать несколько спрайтов, что я могу позиционировать где угодно на наших веб-страницах. Я видел несколько листов спрайтов, похожих на 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>

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

Образец изображения:

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

Пример:

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"> </a>
<a href="link2.html"> </a>
<a href="link2.html"> </a>

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

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

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

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

! [alt text] [5]

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

4 ответа

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

#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"> </a>
<a href="link2.html" id="logo-link2"> </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"> </a>

И jsfiddle http://jsfiddle.net/gJkCZ/


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

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


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

Подход, который он принимает, выглядит следующим образом:

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


Это лучший способ, который я понял. В основном потому, что каждое изображение в главном меню (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><code><a id="services">Services</a>
</code></li>

licensed under cc by-sa 3.0 with attribution.