何时使用 IMG 与 CSS 背景图像?
这个问题的答案是 社区的努力。编辑现有答案以改进这篇文章。它目前不接受新的答案或交互。
IMG
在什么情况下使用 HTML标签来显示图像比 CSS更合适,background-image
反之亦然?
因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
-
正确使用 IMG
- 如果
IMG
您打算让人们打印您的页面并且您希望默认包含图像,请使用此选项。∥JayTee [] - 当图像具有重要的语义含义时使用
IMG
(带alt
文本),例如警告图标。这确保了图像的含义可以在所有用户代理中传达,包括屏幕阅读器。
IMG 的实际应用
- 如果图像是内容的一部分,例如徽标或图表或人物(真人,而不是库存照片人物),请使用
IMG
加号 alt 属性。’sanchothefat IMG
如果您依赖浏览器缩放来呈现与文本大小成比例的图像,请使用此选项。- 用于IE6
IMG
中的多个叠加图像。 -
IMG
与 a一起使用z-index
以拉伸背景图像以填充其整个窗口。
请注意,这不再适用于 CSS3 背景大小;见下文#6。 -
使用
img
而不是background-image
可以显着提高背景动画的性能。
何时使用 CSS 背景图像
- 如果图像不是内容的一部分,请使用 CSS 背景图像。’
- 在对文本进行图像替换时使用 CSS 背景图像,例如。段落/标题。’ sanchothefat
- 如果
background-image
您打算让人们打印您的页面并且您不希望默认包含图像,请使用此选项。∥JayTee [] - 如果
background-image
您需要缩短下载时间,请使用CSS sprites。 - 如果
background-image
您只需要图像的一部分可见,则使用 CSS sprites。 - 使用
background-image
withbackground-size:cover
来拉伸背景图像以填充其整个窗口。
- 如果