还有一个原因!如果你有一个响应式的设计，并且想通过媒体查询来划分低分辨率、中分辨率和高分辨率图像的使用，那么你也应该使用背景。

如果您希望图像是流动的并可缩放到不同的屏幕尺寸，则可以使用IMG标记。对我来说，这些图片主要是内容的一部分。对于大多数不属于内容的元素，我使用CSS精灵来保持最小的下载大小，除非我真的想要动画图标等。

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

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

总之，这是一种情境。

以上回答只考虑设计方面。我在搜索引擎优化方面列出了它。

何时使用<img />

When Your Image need to be indexed by search engine If it has relation to content, including cards (click areas), but not related to design. Design is probably the most difficult thing to parse here because so it's all design right. I would say perhaps functional design (Cards, thumbnails, profile images, things you can click) vs Aesthetic design which is mostly used for sites appeal. List item If your image is not too small ( not iconic images ). Images where you can add alt and title attribute. Images from a webpage which you want to print using print media css

何时使用CSS背景图像

纯粹用于设计的图像。 与内容无关。 小图像，我们可以玩CSS3。 重复图片(在博客作者图标中，每篇文章都会重复日期图标等)。

因为我将基于这些原因使用它们。这些都是图像搜索引擎优化的良好实践。

如果您将CSS放在外部文件中，那么将站点中频繁使用的图像(例如头部图像)显示为背景图像通常是很方便的，因为这样您以后就可以灵活地更改图像。

例如，假设你有以下HTML:

<div id="headerImage"></div>

.．.和CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

几天后，您更改了图像的位置。你所要做的就是更新CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

否则，您必须在每个HTML文件中更新适当的<img>标记的src属性(假设您没有使用服务器端脚本语言或CMS来自动化该过程)。

另外，如果你不希望用户能够保存图像，背景图像也是有用的(尽管我从来没有需要这样做)。

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

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