Использование спрайтов с тегом IMG? - PullRequest
Новая
       3

Использование спрайтов с тегом IMG?

61 голосов
/ 02 декабря 2010

Я понимаю, как использовать спрайты, однако не требуется ли атрибут "src" для тегов IMG? Я всегда мог бы использовать SPAN или другой тег и установить background / width / etc, но это не будет семантически правильным.

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

Ответы [ 6 ]

59 голосов
/ 29 июня 2011

Использование спрайтов не обязательно означает, что вам нужно определять их в фонах CSS.Вы также можете использовать спрайты тэгов IMG, для этого вам нужно обрезать изображение.Есть две хорошие статьи, объясняющие эту технику:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

Оба метода, CSS и IMG, безусловно, имеют свои преимущества, поэтому вам нужно разобратьсякакой из них подходит вам лучше.

57 голосов
/ 02 декабря 2010

О семантической корректности:

Если изображение имеет семантическое значение, , поэтому оно считается содержимым, используйте тег IMG без спрайтов иправильно установите ALT.

Когда изображение является просто украшением, , как фон рамки, фон кнопки, фон пункта меню и т. д., оно не имеет семантического значения, так что вы можете просто использовать его в качестве фона SPAN, DIV и т. д. из CSS.В этом случае вы можете использовать спрайты.

7 голосов
/ 31 августа 2011

Я использую прозрачный gif 1x1 (так называемый spacer) для src.затем установите фоновое изображение для этого тега img с соответствующей позицией bg.таким образом вы используете скорость спрайтов и сохраняете семантику вашего кода (вы все равно можете использовать атрибут alt)

5 голосов
/ 02 декабря 2010

Я всегда мог использовать SPAN или другой тег и устанавливать фон / ширину / и т. Д., Но это не будет семантически правильным

На самом деле нет ничего плохого в использовании CSS для установкифон пролета или дел.На самом деле было бы неправильно синтаксически опускать src из изображения, так как в этом весь смысл тега.В стандартах ничего не сказано о том, что вы должны помещать текст в промежуток.С синтаксической точки зрения, изменение фона элемента было бы наиболее «правильным» способом сделать это.

Вот ссылка на теги img в W3C: http://www.w3.org/TR/html401/struct/objects.html#h-13.2

И небольшое дополнительное чтение: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3

Эти элементы определяют содержаниевстроенный (SPAN) или блочный (DIV), но не навязывает контент другим форматам представления.Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang и т. Д., Чтобы адаптировать HTML к своим собственным потребностям и вкусам.

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

Вы можете использовать CSS-фоны или HTML Canvas элементы для динамического рисования. С холстами у вас есть возможность легко подбирать изображения и выполнять эффекты режима наложения .

1 голос
/ 12 мая 2014

Вы решаете это, переосмысливая свои варианты.

Вы создаете определенную область с <a> с display:block; или <div> и используете overflow hidden;, чтобы скрыть переполнение и position:relative;.

Затем вы помещаете ваш <img> спрайт изображения внутри абсолютно позиционированного, что возможно, поскольку вы позиционировали родителя.

Затем используйте :hover на изображении, чтобы изменить положение.

Теперь ваш спрайт основан на теге img, поэтому вы можете использовать текст alt.

Следующий пример основан на спрайте Facebook с двумя версиями иконки друг над другом, каждая 50 на 50 пикселей, общая высота изображения 100 пикселей: 

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
...