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

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

正确使用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.

我想再补充两个论点:

An img tag is good if you need to resize the image. E.g. if the original image is 100px by 100 px, and you want it to be 80px by 80px, you can set the CSS width and height of the img tag. I don't know of any good way to do this using background-image. EDIT: This can now also be done with a background-image, using the background-size CSS3 attribute. Using background-image is good when you need to dynamically switch between sprites. E.g. if you have a button image, and you want a separate image displayed when the cursor is hovering over the element, you can use a background image containing both the normal and hover sprites, and dynamically change the background-position.

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

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

只在必要的时候使用背景图像，例如容器的图像是平铺的。

其中一个主要的优点是使用图像是更好的搜索引擎优化。