在什么情况下使用HTML IMG标记来显示图像更合适,而不是CSS背景图像,反之亦然?

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


当前回答

一些应该使用background-image的其他场景:

当鼠标悬停在图像上时,希望图像发生变化。 当您想要添加圆角的图像。如果使用img,图像会从圆角中泄漏出来。

其他回答

还要注意,大多数搜索引擎蜘蛛不会索引CSS背景图像,因此背景图像将被忽略,你将无法从搜索引擎获得任何流量(简而言之,没有SEO好处)。

其中,所有用标签定义的图像都被索引(除非手动排除),并且如果它们的标题/alt属性和文件名经过适当优化(w.r.t一些关键字),就可以从搜索引擎带来流量。

我想再补充两个论点:

An img tag is good if you need to resize the image. E.g. if the original image is 100px by 100 px, and you want it to be 80px by 80px, you can set the CSS width and height of the img tag. I don't know of any good way to do this using background-image. EDIT: This can now also be done with a background-image, using the background-size CSS3 attribute. Using background-image is good when you need to dynamically switch between sprites. E.g. if you have a button image, and you want a separate image displayed when the cursor is hovering over the element, you can use a background image containing both the normal and hover sprites, and dynamically change the background-position.

与sanchothefat的回答大致相同,但从不同的角度。我总是问自己:如果我要完全从网站上删除样式表,剩下的元素只属于内容吗?如果是这样,我的工作做得很好。

浏览器并不总是默认设置为打印背景图像;如果你想让别人打印你的页面:)

另一个背景-图像PRO: <ul>/<ol>列表的背景-图像。

如果背景图像是整体设计的一部分,并且在多个页面上重复使用,则使用背景图像。最好以背景精灵的形式进行优化。

对所有不属于整体设计的图像使用标签,并且很可能只放置一次,比如文章、人物的特定图像,以及值得添加到谷歌图像中的重要图像。

**我在<img>标签中唯一重复的图像是网站/公司标志。因为人们倾向于点击它进入主页,所以你用<a>标签来包装它。