什么时候使用IMG vs. CSS background-image？ [英] 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

Proper uses of IMG

IMG 如果你打算有
人打印您的页面，并且您希望默认情况下包括该图像。
— JayTee

1. 使用 IMG当图像具有重要的语义含义时，例如（带有 alt / naughty-or-nice-css-background-imagesrel =nofollow noreferrer>警告图示。




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.

实用功能使用者可以在所有使用者代理程式（包括萤幕阅读器） of IMG

Pragmatic uses of IMG

1. 如果您打算拥有$ b，请使用 IMG $ b人打印您的网页并且您希望默认情况下包括该图像。
   — JayTee



2. 使用<$ c


3. 使用 IMG $ c>
for IE6中的多个重叠图片< a>。


4. 用 z-index 使用 IMG 按顺序
   到拉伸背景图片以填充整个窗口。
   注意，CSS3背景大小不再是这样;

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 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

When to use CSS background-image

1. 如果
   图片不是内容的一部分。
   — sanchothefat <​​/a>


2. 在$ b $时使用CSS背景图片b执行图像替换文本例如。段落/标题。
   — sanchothefat <​​/a>


3. 使用背景-image 如果你打算有
   人打印您的页面，并且您不希望默认情况下包含该图片。
   — JayTee


4. 使用背景-image （如果您需要改进下载时间），请将
   与 CSS sprites 。


5. 如果您只需要将图片的一部分显示为可见，请使用 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 vs. CSS background-image？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！