Использование CSS-спрайтов на HTML-странице

Question

Я просмотрел все инструкции о спрайтах CSS, и хотя некоторые из них полезны, абсолютно никто не объясняет, как именно использовать класс CSS для отображения изображения на странице HTML.

Это мойКод CSS, у него есть два класса.

.sprites{background-image:url('bookie_logos/0csssprites.png');background-color:transparent;background-repeat:no-repeat;}
#3_png{height:16px;width:75px;background-position:0 0;}
#5_png{height:16px;width:75px;background-position:-75px 0;}
...and so on

Какой код я использую для отображения нужного мне изображения, а не в виде ссылки, не в виде списка, не в качестве фона, просто отдельное изображениес шириной 75 и высотой 16?Я полагаю, что я должен использовать DIV и назначить для него два класса, например: class = "sprites 3_png", но он не работает.

ОБНОВЛЕНИЕ: Было несколько проблем скод.Во-первых, 3_png следует использовать как идентификатор, а не как класс.Во-вторых, код работает только при использовании соглашения об именах png_N вместо N_png, он не будет работать, когда он начинается с числа.После нахождения рабочего решения я столкнулся с другой проблемой с изображениями, создающей разрыв строки, решил ее с помощью display: inline.Это код CSS и PHP, который производит желаемый результат:

CSS:

.sprites {background-image:url('bookie_logos/0csssprites.png');background-color:transparent;background-repeat:no-repeat;display:inline;}
#png3  {height:16px;width:75px;background-position:0px 0;}
#png5  {height:16px;width:75px;background-position:-75px 0;}

PHP:

$classy = "png" . $db_field['bookieid'];
echo "<td>" , "<img src='transparent.gif' class='sprites' id='$classy' alt='bookie' align='absmiddle'/>" , "</td>";

$ classy - это переменная, которая выбирает между160+ изображений в спрайт-листе.transparent.gif - это прозрачный gif размером 1px, так как я решил использовать тег IMG вместо DIV, и мне нужно использовать этот 1-пиксельный gif, чтобы тег IMG отображал изображение спрайта.

Я хотел бы поблагодарить всех участников, большинство из вас видели первую часть проблемы, где вместо класса должен использоваться ID.Вы все направили меня к решению, и, к сожалению, я могу выбрать только один ответ, и я выбираю тот, который упомянул display: block, так как он заставил меня использовать display: inline позже.

Спасибо всем, и янадеюсь, что этот вопрос и ответ помогут кому-то, кто испытывает ту же проблему со спрайтами CSS.

Answer 1

Ваша ошибка использует 3_png как класс, это идентификатор, а также css грамматика spec говорит, что идентификаторы и классы должны начинаться с -, _ или буквы a-z , поэтому 3_png недействительно, но png_3 нет.

, чтобы заставить его работать, вы должны использовать:

 <div id="png_3" class="sprites"></div>

и измените свой CSS, чтобы отразить изменение имени.

Answer 2

Если вы хотите использовать 1 спрайт для отображения нескольких изображений, я думаю, вам следует попробовать это:

CSS

.sprite {
  background-image:url('bookie_logos/0csssprites.png');
  background-color:transparent;
  background-repeat:no-repeat;
  display:block;
}

#img_1 {
  height:16px;width:75px;background-position:0px 0;
}

#img_2 {
  height:16px;width:75px;background-position:-75px 0;
}

HTML

<div class="sprite" id="img_1">
</div>

<div class="sprite" id="img_2">
</div>

Answer 3

Если вы применяете 3_png как класс, он не будет работать.

Вам нужно будет установить идентификатор div как 3_png или изменить CSS, чтобы сделать 3_png классом

Вариант один:

HTML:

<div id="3_png" class="sprites"></div>

CSS остается прежним.

Вариант два:

HTML:

<div class="3_png sprites" > </div>

CSS:

.sprites{background-image:url('bookie_logos/0csssprites.png');background-color:transparent;background-repeat:no-repeat;}
.3_png{height:16px;width:75px;background-position:0 0;}

Answer 4

Я бы больше использовал CSS, чтобы сделать его немного более понятным:

.icon_box{
    width:75px; 
    height:16px; 
    /* default image */
    background: img('/my/image/file.png') 0 0 no-repeat;
}

.icon1{
    background-position: -75px 0;
}
.icon2{
    background-position: -150px 0;
}

Ваш HTML

<div class="icon_box icon1"></div>
<div class="icon_box icon2"></div>

Это предполагает, что ваш спрайт изображения имеет высоту 16px и имеет изображения каждые 75px слева направо, как в этом скудном искусстве ASCII. = Р

[ Img1   Img2   Img3   ... ]

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

Идея в том, что значение по умолчанию устанавливает базовый «холст», а затем вы просто перемещаете фоновое изображение, которое вам нужно.

ОБНОВЛЕНИЕ 2

Вот JSFiddle, который использует код, подобный тому, что я написал выше: http://jsfiddle.net/VNn2D/4/

Он использует это изображение спрайта: http://i.imgur.com/BZSLn.gif

Это приходит из этой статьи на тему: http://www.alistapart.com/articles/sprites

Надеюсь, это поможет.

ура!

Answer 5

Ваш 3_png - это идентификатор, а не класс. Либо сделайте его классом, либо используйте идентификатор

Answer 6

Ты не. Вот для чего нужен тег <img>.