动态设置背景图像或创建img标记有什么区别

What are the differences in dynamically setting a background-image or creating an img tag?

本文关键字：什么区别 img 创建设置背景图像动态更新时间：2023-10-30

查询可能有图像也可能没有图像的API时，设置background-image或实际创建img标记的主要区别是什么？

<div class="img" style="background-image:url(...)"></div>

与

<div class="img"><img src="..." alt="#" /></div>

第二个选项使背景可选，这可能会损害设计。这也会损害定位。Imho并不总是第一个使用。以及来自外部css。

如果图像不存在，则可能会显示损坏的图像标记。它还将引发一个"错误"事件。看见http://css-tricks.com/snippets/jquery/better-broken-image-handling/

一个破碎的背景图像会更加"无声"地失败

背景图像是一种表现细节。

前景图像是内容。

如果图像改变了读者对文档的理解，那么它应该是<img>。如果它只是装饰性的，那么应该使用CSS。