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

Question

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

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

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

Answer 1

正确使用 IMG

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

IMG 的实际应用

1. 如果图像是内容的一部分，例如徽标或图表或人物（真人，而不是库存照片人物），请使用IMG加号 alt 属性。’sanchothefat
2. IMG如果您依赖浏览器缩放来呈现与文本大小成比例的图像，请使用此选项。
3. 用于IE6IMG 中的多个叠加图像。

4. IMG 与 a一起使用z-index以拉伸背景图像以填充其整个窗口。
   请注意，这不再适用于 CSS3 背景大小；见下文#6。
   

5. 使用img而不是background-image可以显着提高背景动画的性能。

何时使用 CSS 背景图像

1. 如果图像不是内容的一部分，请使用 CSS 背景图像。’
2. 在对文本进行图像替换时使用 CSS 背景图像，例如。段落/标题。’ sanchothefat
3. 如果background-image您打算让人们打印您的页面并且您不希望默认包含图像，请使用此选项。∥JayTee []
4. 如果background-image您需要缩短下载时间，请使用CSS sprites。
5. 如果background-image您只需要图像的一部分可见，则使用 CSS sprites。
6. 使用background-imagewithbackground-size:cover来拉伸背景图像以填充其整个窗口。