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

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


当前回答

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

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

其他回答

在多个皮肤或设计版本的情况下使用CSS背景图像。Javascript可以用来动态地改变一个元素的类,这将迫使它呈现不同的图像。如果使用IMG标签,可能会更加棘手。

如果您希望图像是流动的并可缩放到不同的屏幕尺寸,则可以使用IMG标记。对我来说,这些图片主要是内容的一部分。对于大多数不属于内容的元素,我使用CSS精灵来保持最小的下载大小,除非我真的想要动画图标等。

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

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

这里有一个技术上的考虑:图像是动态生成的吗?在HTML中生成<img>标记往往比尝试动态编辑CSS属性容易得多。

只在必要的时候使用背景图像,例如容器的图像是平铺的。

其中一个主要的优点是使用图像是更好的搜索引擎优化。