html - 何时使用 IMG 与 CSS 背景图像？

Question

这个问题的答案是 community effort 。编辑现有答案以改进这篇文章。它目前不接受新的答案或交互。

在什么情况下使用 HTML IMG 标签比 CSS background-image 更合适，反之亦然？

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

Answer 1

正确使用 IMG

1. 如果您打算使用 IMG人 print your page并且您希望默认情况下包含图像。— JayTee
2. 当图像具有重要的语义含义时，使用 IMG(带有 alt 文本)，例如 a warning icon .这确保了图像的含义可以在所有用户代理中传达，包括屏幕阅读器。

IMG 的实际使用

1. 如果图片使用 IMG 加上 alt 属性是 part of the content例如 Logo 或图表或人物(真人，而不是库存照片人物)。— sanchothefat
2. 如果您依靠浏览器缩放来呈现与文本大小成比例的图像，请使用 IMG。
3. 使用IMG对于 multiple overlay images in IE6 .
4. 按顺序使用 IMG 和 z-index至 stretch a background image填满整个窗口。
   注意，CSS3 background-size 不再适用；见下文#6。
5. 使用 img 代替 background-image 可以显着提高背景动画的性能。

何时使用 CSS 背景图片

1. 使用 CSS 背景图片，如果图片 is not part of the content .— sanchothefat
2. 在以下情况下使用 CSS 背景图片做image-replacement of text例如。段落/标题。— sanchothefat
3. 如果您打算使用 background-image人 print your page并且您不希望默认情况下包含该图像。— JayTee
4. 如果您需要缩短下载时间，请使用 background-image，如与 CSS sprites .
5. 如果您只需要让图像的一部分可见，请使用 background-image，就像使用 CSS Sprite 一样。
6. 使用 background-image 和 background-size:cover 以拉伸(stretch)背景图像以填充其整个窗口。