Div с фоном изображения против тегов img - PullRequest
7 голосов
/ 24 августа 2009

Мне было интересно, как лучше всего использовать div с фонами и тегами img. Я понимаю, что у div с фонами может быть что-то поверх них, а что нет, но если это просто случай с изображением, какой метод предпочтительнее? Может быть, лучший вопрос ... являются ли теги img устаревшими? Если у вас есть изображение со ссылкой, вы должны использовать тег img или div?

Спасибо! Мэтт Мюллер

Ответы [ 5 ]

15 голосов
/ 24 августа 2009

Разделенные фоны должны быть именно такими: фоновые изображения для стиля. Теги img должны использоваться, когда вы отображаете фактическое изображение как само изображение, скажем, вы показываете изображение чего-либо. Вы должны использовать тег изображения, а не div BG

9 голосов
/ 24 августа 2009

Думайте об этом как о семантической разметке:

  1. Если это «изображение» на странице, то, если понимать смысл страницы, используйте тег img.

  2. Если это что-то, что не так важно для значения страницы, т.е. фоновое изображение, используйте фоновое изображение для любого элемента (не только для div).

Это различие действительно не имеет значения для того, как страница отображается в большинстве браузеров, но имеет другое значение для тех, кто не интерпретирует изображения визуально.

Попытайтесь представить, как элементы будут интерпретироваться слабовидящими.

Там также может быть немного другое поведение поисковых систем - я не знаю, будут ли поисковые системы подбирать фоновые изображения для поиска изображений. Если вам действительно нужно изображение, тег img безопаснее.

5 голосов
/ 24 августа 2009

Хороший способ посмотреть на это - просмотреть свой сайт с выключенными таблицами стилей. Вы быстро обнаружите, что все теги DIV с фоновыми изображениями не отображаются. Все ваши изображения тегов IMG находятся там, где они должны быть. Я бы использовал теги DIV с фоновыми изображениями для всех аспектов дизайна и макета сайта, а теги IMG для всего остального.

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

5 голосов
/ 24 августа 2009

это изображение для макета или контента?

если изображение связано с макетом, я использовал бы CSS и поместил бы его в div ... если бы его содержание было связано с img ...

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

1 голос
/ 24 августа 2009

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

Фоновые изображения на элементах div полезны, когда у вас есть статический набор изображений, которые являются частью вашего дизайна. Иногда вы можете объединить их в одно большое изображение, чтобы минимизировать время загрузки и количество HTTP-запросов на страницу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...