Когда использовать IMG против CSS background-image?
Используйте опцию -Wconversion. -Wall не включает его.
С помощью опции -Wconversion GCC дает эти предупреждающие сообщения:
предупреждение: преобразование в 'int' изменяет двойную константу value: преобразование в 'int' из 'double' может изменить его значение
11 ответов
Proper uses of IMG
- Use
IMGif you intend to have people print your page and you want the image to be included by default. —JayTee - Use
IMG(withalttext) 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
- Use
IMGplus 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 - Use
IMGif you rely on browser scaling to render an image in proportion to text size. - Use
IMGfor multiple overlay images in IE6. UseIMGwith az-indexin order to stretch a background image to fill its entire window.
Note, this is no longer true with CSS3 background-size; see #6 below.- Using
imginstead ofbackground-imagecan dramatically improve performance of animations over a background.
When to use CSS background-image
- Use CSS background images if the image is not part of the content. —sanchothefat
- Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
- Use
background-imageif you intend to have people print your page and you do not want the image to be included by default. —JayTee - Use
background-imageif you need to improve download times, as с CSS-спрайтами . - Используйте
background-image, если вам нужно, чтобы была видна только часть изображения, как в случае со спрайтами CSS. - Используйте
background -imageсbackground-size: cover, чтобы растянуть фоновое изображение для заполнения всего окна.
Браузеры не всегда настраиваются для печати фоновых изображений по умолчанию; если Вы намереваетесь сделать, чтобы люди распечатали Вашу страницу :)
Это - черно-белое решение мне. Если изображение является частью содержания, такого как логотип, или схема или человек (живой человек, не фото люди запаса) затем используют эти <img /> тег плюс атрибут высокого звука. Для всего остального существуют фоновые изображения CSS.
другое время для использования фоновых изображений CSS при выполнении замены изображения текста, например, абзацев/заголовков.
Вот техническое соображение: изображение будет сгенерировано динамично? Это имеет тенденцию быть намного легче генерировать эти <img> тег в HTML, чем попытаться динамично отредактировать свойство CSS.
Используйте фоновое изображение CSS в случае нескольких шкур или версиях дизайна. JavaScript может использоваться для динамичного изменения класса элемента, который вынудит его представить другое изображение. С тегом img это может быть более хитро.
Если у вас есть 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 для автоматизации процесса).
Также фоновые изображения полезны, если вы не хотите, чтобы пользователь смог сохранить изображение (хотя я гавань»
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.
Как насчет размера изображения? Если я использую тег img, браузер масштабирует изображение. Если я использую фон css, браузер просто отрезает кусок от большего изображения.
Используя фоновое изображение, вам необходимо точно указать размеры. Это может стать серьезной проблемой, если вы на самом деле не знаете их заранее или не можете их определить.
Большая проблема с - это наложения. Что, если мне нужна внутренняя тень CSS на моем изображении (
box-shadow: inset 0 0 5px rgb (0,0,0, .5) )? В этом случае, поскольку не может иметь дочерних элементов, вам нужно использовать позиционирование и добавлять пустые элементы, что приравнивается к бесполезной разметке.
В заключение, это довольно ситуативно.
Просто чтобы бросить гаечный ключ в работу - я считаю, что вы никогда не следует использовать тег img. HTML был предназначен для содержания, а не для визуального стиля. все изображения на вашей странице должны быть взяты из CSS, оставляя ваш HTML-код чистым. (даже если сборка займет немного больше времени)