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

作者
这个问题&#39；s的答案是社区的努力。编辑现有答案以改进此帖子。它目前不接受新的答案或互动。

在什么情况下，使用HTMLIMG标记来显示图像比使用CSS背景图像更合适，反之亦然

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

IMG的正确使用

  1. 如果您打算使用IMG
    人们打印您的页面，您希望在默认情况下包含图像。
    &mdash；杰蒂
  2. 当图像具有重要的语义含义（如警告图标）时，使用IMG（使用alttext）。这确保图像的含义可以在所有用户代理（包括屏幕阅读器）中传达

IMG的语用

  1. 使用IMG加上alt属性，如果图像
    是内容的一部分，例如徽标、图表或人物（真实人物，而不是照片人物）。
    &mdash；桑乔菲特
  2. 如果依赖浏览器缩放来按文本大小的比例渲染图像，请使用IMG
  3. 使用IMG
    对于IE6中的多个重叠图像
  4. 按顺序使用IMG和z-索引
    拉伸背景图像以填充整个窗口。
    注意，CSS3背景大小不再适用；见下文第6条
  5. 使用img而不是background image可以显著提高背景动画的性能

何时使用CSS背景图像

  1. 如果需要，请使用CSS背景图像
    图像不是内容的一部分。
    &mdash；桑乔菲特
  2. 使用CSS背景图像时
    对文本（如段落/标题）进行图像替换。
    &mdash；桑乔菲特
  3. 如果您想使用背景图像，请使用background image
    人们打印您的页面，您不希望在默认情况下包含图像。
    &mdash；杰蒂
  4. 如果需要缩短下载时间，请使用背景图像，如下所示
    使用CSS精灵
  5. 如果只需要图像的一部分可见，请使用背景图像，如CSS精灵
  6. 使用background image和background size:cover来拉伸背景图像以填充整个窗口

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with