我很惊讶没有人提到这个:CSS过渡。

你可以本地转换一个div的背景图像:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

这将保存任何类型的JavaScript或jQuery动画来淡化<img/>的src。

更多关于MDN转换的信息。

图像的大小呢?如果我使用img标记，浏览器将缩放图像。如果我使用css背景，浏览器只是从较大的图像中切割一块。

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

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

当鼠标悬停在图像上时，希望图像发生变化。 当您想要添加圆角的图像。如果使用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。 重复图片(在博客作者图标中，每篇文章都会重复日期图标等)。

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

前景= img。

Background = CSS背景。