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

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


当前回答

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

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

其他回答

IMG首先加载,因为src是在html文件本身,而在背景图片的情况下,源是在样式表中提到的,所以图片在样式表加载后加载,延迟了网页的加载。

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

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

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

使用背景图像时,您需要明确指定尺寸。如果你事先不知道它们或无法确定它们,这可能是一个严重的问题。

<img />的一个大问题是覆盖。如果我想在我的图像上添加一个CSS内阴影(box-shadow:inset 0 0 5px rgb(0,0,0,.5))怎么办?在本例中,由于<img />不能有子元素,因此需要使用定位并添加等同于无用标记的空元素。

总之,这是一种情境。

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