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

Question

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

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

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

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

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

Добавлена ​​базовая спрайтов лист на оси х

Пример:

Ok Guys:

До сих пор у меня есть это в 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

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

[! alt text] [5]

Наконец-то выяснилось.

Answer 1

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

#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 
{ 
    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/

Answer 2

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

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

Answer 3

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

• http://weblogs.asp.net/craigshoemaker/archive/2010/08/06/asp-net-sprite-amp-image-optimization-framework-intro-in-webforms.aspx
• http://aspnet.codeplex.com/releases/view/50869

Подход оно принимает следующим образом:

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

Answer 4

Это лучший способ, который я выяснил. В основном потому, что каждое изображение в главном меню (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;} 

Markup

<li><a id="home"?> title="Kintek Web Design, Brisbane">Home</a></li> 
<li><a id="services" class="selected">Services</a>