在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?

这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。


当前回答

浏览器并不总是默认设置为打印背景图像;如果你想让别人打印你的页面:)

其他回答

此外,我有一个画廊部分,有不一致的图片大小,所以即使这些图像显然被认为是内容,我使用背景图像和中心它们在divs设置大小。这类似于facebook在他们的相册里做的事情。

对我来说,这是个非黑即白的决定。如果图像是内容的一部分,如logo、图表或人物(真实人物,而不是库存照片人物),则使用<img />标记加上alt属性。其他的都有CSS背景图片。

另一个使用CSS背景图像的时间是在做文本的图像替换时。段落/头。

浏览器并不总是默认设置为打印背景图像;如果你想让别人打印你的页面:)

还有一个原因!如果你有一个响应式的设计,并且想通过媒体查询来划分低分辨率、中分辨率和高分辨率图像的使用,那么你也应该使用背景。

正确使用IMG

如果您打算使用IMG 人们打印您的页面,您希望在默认情况下包含图像。 -JayTee 当图像具有重要的语义含义时,例如警告图标,使用IMG(带有alt文本)。这确保了图像的含义可以在所有用户代理(包括屏幕阅读器)中传达。

IMG的实用用途

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 Use IMG if you rely on browser scaling to render an image in proportion to text size. Use IMG for multiple overlay images in IE6. 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. Using img instead of background-image can dramatically improve performance of animations over a background.

何时使用CSS背景图像

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-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee Use background-image if you need to improve download times, as with CSS sprites. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.