Как использовать Sprite вместо img src - PullRequest
Новая
       12

Как использовать Sprite вместо img src

1 голос
/ 10 сентября 2010

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

<td align="center">
    <img alt="my alt text" src="/Assets/t/myImage.gif" />
</td>

Я некоторое время пытаюсь изменить это и заставить использовать изображение в моем спрайте вместо src

Ответы [ 2 ]

0 голосов
/ 10 сентября 2010

спрайты - это большие изображения, содержащие более одного рисунка, которые используются в CSS в качестве фонового изображения. Они помещаются в качестве фона на блочные элементы, которые также имеют размер CSS, используя ширину и высоту. Затем, используя background-position, фоновое изображение размещается там, где оно должно быть. Изображение обрезается в соответствии с этими координатами и размером элемента, а остальное игнорируется (используется для фона других элементов).

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

button  {display: block; width: 100px; height: 50px; background-image: url(yourImage.png); background-repeat: no-repeat; background-position: 0 0;}
button:HOVER {background-position: 0 -50px;}
button.active {background-position: 0 -100px;}

Это также устранит ситуацию, когда новое фоновое изображение должно быть загружено при изменении состояния, при этом оставляя некрасивую кнопку на полсекунды.

0 голосов
/ 10 сентября 2010

Вот простой пример использования изображений спрайтов.

Основная идея заключается в использовании фонового изображения для элемента фиксированного размера (в примере это тег a с шириной / высотой 20 пикселей) Затем расположите изображение, используя background-position, чтобы выбрать нужный спрайт. Селектор :hover используется для выбора еще одного спрайта при наведении. Обычно у вас будет несколько ссылок, использующих другой спрайт из одного изображения.

CSS: 

a.sprite_button
{
    background-image:url(toolbar.png);
    width:20px;
    height:20px;
    display:inline-block;
}
a#button1         { background-position:0px 0px; }
a#button1:hover   { background-position:0px 20px; }

HTML: 

<a href="blah" class="sprite_button" id="button1"></a>
...