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

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


当前回答

图像的大小呢?如果我使用img标记,浏览器将缩放图像。如果我使用css背景,浏览器只是从较大的图像中切割一块。

其他回答

有些答案把情况复杂化了。这是一个非常简单的情况。

每次你想放一张图片的时候就回答这个问题:

这是内容的一部分还是设计的一部分?

如果你不能回答这个问题,你可能不知道你在做什么或你想做什么!

此外,不要仅仅因为你想要“打印机友好型”而考虑这两种技术。也不要从SEO的角度用CSS隐藏内容。如果您发现自己在CSS文件中管理内容,那么您是在搬起石头砸自己的腿。这只是什么是内容或不内容的一个微不足道的决定。其他方面都应该被忽略。

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

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

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

对我来说,这是个非黑即白的决定。如果图像是内容的一部分,如logo、图表或人物(真实人物,而不是库存照片人物),则使用<img />标记加上alt属性。其他的都有CSS背景图片。

另一个使用CSS背景图像的时间是在做文本的图像替换时。段落/头。

关于使用CSS TranslateX/Y(正确的html动画方式)动画图像-如果你做一个Chrome时间轴记录的CSS背景图像被动画和IMG标签被动画,你会发现绘制时间大大缩短了CSS背景图像。