协慌网

在什么情况下使用 HTML IMG标签来显示图像更合适，而不是 CSS background-image ，反之亦然？

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

正确使用 IMG

1. 如果您打算让人们打印您的页面并且您希望默认包含图像，请使用IMG 。 - JayTee
2. 当图像具有重要的语义含义时，使用IMG （带alt文本），例如警告图标 。这确保了图像的含义可以在所有用户代理（包括屏幕阅读器）中传达。

IMG 的实用用法

1. 如果图像是内容的一部分（例如徽标或图表或人物（真实的人，而不是股票照片的人）），请使用IMG plus alt 属性。 - sanchothefat
2. 如果您依赖浏览器缩放来渲染与文本大小成比例的图像，请使用IMG 。
3. 在 IE6 中将 IMG用于多个叠加图像 。
4. 使用带有z-index IMG以拉伸背景图像以填充整个窗口。
   请注意，CSS3 background-size 不再适用; 见下面的＃6。
5. 使用img而不是background-image可以显着提高背景动画的性能。

何时使用 CSS background-image

1. 如果图像不是内容的一部分，请使用 CSS 背景图像。 - sanchothefat
2. 在进行文本图像替换时使用 CSS 背景图像，例如。段落 / 头。 - sanchothefat
3. 如果您打算让人们打印您的页面并且您不希望默认情况下包含该图像，请使用background-image 。 - JayTee
4. 如果需要改进下载时间，请使用background-image ，就像使用CSS sprites 一样 。
5. 如果只需要一部分图像可见，则使用background-image ，就像使用 CSS 精灵一样。
6. 使用background-image的background-size:cover background-image background-size:cover以拉伸背景图像以填充整个窗口。

这对我来说是一个黑白分明的决定。如果图像是内容的一部分，例如徽标或图表或人（真实的人，而不是股票照片人），则使用<img />标签加 alt 属性。其他一切都有 CSS 背景图片。

另一次使用 CSS 背景图像是在进行文本的图像替换时。段落 / 头。

我很惊讶没人提到这个： CSS 过渡 。

您可以原生地转换div的背景图像：

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

这样就可以保存任何类型的 JavaScript 或 jQuery 动画来淡化<img/>的src 。

有关MDN转换的更多信息。