Когда использовать IMG против CSS background-image?

В каких ситуациях более целесообразно использовать тег HTML IMG для отображения изображения, а не CSS background-image и наоборот?

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

779
задан 17 revs, 6 users 63% 23 May 2014 в 15:08
поделиться

9 ответов

Proper uses of IMG

  1. Use IMG if you intend to have people print your page and you want the image to be included by default. —JayTee
  2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

Pragmatic uses of IMG

  1. Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat
  2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
  3. Use IMG for multiple overlay images in IE6.
  4. Use IMG with a z-index in order to stretch a background image to fill its entire window.
    Note, this is no longer true with CSS3 background-size; see #6 below.
  5. Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

  1. Use CSS background images if the image is not part of the content. —sanchothefat
  2. Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
  3. Use background-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee
  4. Use background-image if you need to improve download times, as с CSS-спрайтами .
  5. Используйте background-image , если вам нужно, чтобы была видна только часть изображения, как в случае со спрайтами CSS.
  6. Используйте background -image с background-size: cover , чтобы растянуть фоновое изображение для заполнения всего окна.
767
ответ дан 22 November 2019 в 21:22
поделиться

Браузеры не всегда настраиваются для печати фоновых изображений по умолчанию; если Вы намереваетесь сделать, чтобы люди распечатали Вашу страницу :)

51
ответ дан JayTee 24 May 2014 в 02:08
поделиться

Это - черно-белое решение мне. Если изображение является частью содержания, такого как логотип, или схема или человек (живой человек, не фото люди запаса) затем используют эти <img /> тег плюс атрибут высокого звука. Для всего остального существуют фоновые изображения CSS.

другое время для использования фоновых изображений CSS при выполнении замены изображения текста, например, абзацев/заголовков.

285
ответ дан roborourke 24 May 2014 в 02:08
поделиться

Вот техническое соображение: изображение будет сгенерировано динамично? Это имеет тенденцию быть намного легче генерировать эти <img> тег в HTML, чем попытаться динамично отредактировать свойство CSS.

7
ответ дан Bryan M. 24 May 2014 в 02:08
поделиться

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

9
ответ дан MK_Dev 24 May 2014 в 02:08
поделиться

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

Например, скажем, у вас есть следующий HTML:

<div id="headerImage"></div>

... и CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

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

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

В противном случае вам придется обновить атрибут src соответствующего тега в каждом файле HTML (при условии, что вы Вы не используете серверный язык сценариев или CMS для автоматизации процесса).

Также фоновые изображения полезны, если вы не хотите, чтобы пользователь смог сохранить изображение (хотя я гавань»

51
ответ дан 22 November 2019 в 21:22
поделиться

About the same as sanchothefat's answer, but from a different aspect. I always ask myself: if I would completely remove the stylesheets from the website, do the remaining elements only belong to the content? If so, I did my job well.

45
ответ дан 22 November 2019 в 21:22
поделиться

Передний план = изображение

Фон = фон CSS.

17
ответ дан 22 November 2019 в 21:22
поделиться

Как насчет размера изображения? Если я использую тег img, браузер масштабирует изображение. Если я использую фон css, браузер просто отрезает кусок от большего изображения.

7
ответ дан 22 November 2019 в 21:22
поделиться
Другие вопросы по тегам:

Похожие вопросы: