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

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

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

前景= img。

Background = CSS背景。

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

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

何时使用<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背景图像，因此背景图像将被忽略，你将无法从搜索引擎获得任何流量(简而言之，没有SEO好处)。

其中，所有用标签定义的图像都被索引(除非手动排除)，并且如果它们的标题/alt属性和文件名经过适当优化(w.r.t一些关键字)，就可以从搜索引擎带来流量。