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

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

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

6 60
html css css-sprites html-validation

6 ответов:

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

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

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

56

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

59

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

7

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

на самом деле нет ничего плохого в использовании CSS для установки фона span или div. На самом деле было бы неверно синтаксически опустить 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

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

5

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

3

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

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

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

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

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

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

<!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>
1