Используете спрайты с меткой IMG?

StackOverflow https://stackoverflow.com/questions/4335957

Вопрос

Я понимаю, как использовать спрайты, однако, не является ли атрибутом «SRC», необходимым для тегов IMG? Я всегда мог бы использовать пролет или другой тег и установить фон/ширину/и т. Д., Но он не будет семантически правильным.

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

Это было полезно?

Решение

О семантской правильности:

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

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

Другие советы

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

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

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

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

Я использую 1x1 прозрачный GIF (так называемый проставщик) для SRC. Затем установите фоновое изображение для этого тега IMG с соответствующей позицией BG. Таким образом, вы используете скорость спрайтов и сохраняя семантику вашего кода (вы все равно можете использовать атрибут ALT)

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

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

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

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

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

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

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

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

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

Следующий пример основан на спрайте Facebook с двумя версиями значка друг на друга, каждый из которых 50 % на 50 %, общая высота изображения составляет 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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top