动态设置背景图像或创建 img 标签有啥区别？ [复制]

Posted 2023-03-05

【中文标题】动态设置背景图像或创建 img 标签有啥区别？ [复制]

【英文标题】：What are the differences in dynamically setting a background-image or creating an img tag? [duplicate]动态设置背景图像或创建 img 标签有什么区别？ [复制]

【发布时间】：2013-12-10 22:10:42

【问题描述】：

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

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

对

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

【问题讨论】：

您希望根据什么标准来评估“更好”？例如。跨浏览器的一致外观、易于维护、易于设计以实现特定外观等。

【参考方案1】：

第二个使背景可选择，这可能会损害设计。它也会损害定位。恕我直言，并不总是第一个使用。并来自外部 css。

【参考方案2】：

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

损坏的背景图像会更“静默”地失败。

【参考方案3】：

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

前景图像是内容。

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