何时使用 IMG 与 CSS 背景图像? [英] When to use IMG vs. CSS background-image?

问题描述

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

In what situations is it more appropriate to use an HTML IMG tag to display an image, as opposed to a CSS background-image, and vice-versa?

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

Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.

推荐答案

IMG的正确使用

1. 如果您打算使用 IMG人们打印你的页面希望默认包含图像.—JayTee
2. 当图像具有重要语义时使用 IMG(带有 alt 文本)，例如 警告图标.这可确保图像的含义可以在所有用户代理(包括屏幕阅读器)中传达.

1. Use IMG if you intend to have people print your page and you want the image to be included by default. —JayTee
2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

IMG 的实际应用

1. 使用 IMG 加上 alt 属性，如果图像是内容的一部分这样的作为徽标或图表或人物(真人，不是库存照片人物).—sanchothefat
2. 如果您依赖浏览器缩放以与文本大小成比例呈现图像，请使用 IMG.
3. 使用IMGIE6 中的多个叠加图像.
4. 使用 IMG 和 z-index 按顺序拉伸背景图像以填满整个窗口.
   注意，CSS3 background-size 不再如此；见下面的#6.
5. 使用 img 而不是 background-image 可以显着提高背景动画的性能.

1. Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat
2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
3. Use IMG for multiple overlay images in IE6.
4. Use IMG with a z-index in order to stretch a background image to fill its entire window.
   Note, this is no longer true with CSS3 background-size; see #6 below.
5. Using img instead of background-image can dramatically improve performance of animations over a background.

何时使用 CSS background-image

1. 使用 CSS 背景图片，如果图片 不是内容的一部分.—sanchothefat
2. 在以下情况下使用 CSS 背景图片做图像替换文本例如.段落/标题.—sanchothefat
3. 如果您打算使用 background-image人们打印你的页面不希望默认包含图像.—JayTee
4. 如果您需要缩短下载时间，请使用 background-image，如使用 CSS 精灵.
5. 如果您只需要显示图像的一部分(如 CSS 精灵)，请使用 background-image.
6. 使用 background-image 和 background-size:cover 来拉伸背景图像以填充其整个窗口.

1. Use CSS background images if the image is not part of the content. —sanchothefat
2. Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
3. Use background-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee
4. Use background-image if you need to improve download times, as with CSS sprites.
5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

这篇关于何时使用 IMG 与 CSS 背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！