小编典典

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

all

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

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

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


阅读 92

收藏
2022-03-02

共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来拉伸背景图像以填充其整个窗口。
2022-03-02