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

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


当前回答

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

其他回答

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

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

HTML用于内容,CSS用于设计。图像是必要的,它需要被屏幕阅读器拾取吗?如果答案是肯定的,那么就把图像放到HTML中。如果它纯粹是为了样式化,那么您可以使用CSS中的background-image属性来注入图像。正如这里很多人已经提到的,如果愿意,可以在图像上使用伪元素。

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

只是一个小的添加,你应该使用img标签,如果你想让用户能够“右键单击”和“save-image”/“save-picture”,所以如果你打算将图像作为资源提供给其他人。

使用背景图像将(据我所知在大多数浏览器上)禁用直接保存图像的选项。