另一个背景-图像PRO: <ul>/<ol>列表的背景-图像。

如果背景图像是整体设计的一部分，并且在多个页面上重复使用，则使用背景图像。最好以背景精灵的形式进行优化。

对所有不属于整体设计的图像使用标签，并且很可能只放置一次，比如文章、人物的特定图像，以及值得添加到谷歌图像中的重要图像。

**我在<img>标签中唯一重复的图像是网站/公司标志。因为人们倾向于点击它进入主页，所以你用<a>标签来包装它。

我很惊讶没有人提到这个: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转换的信息。

有些答案把情况复杂化了。这是一个非常简单的情况。

每次你想放一张图片的时候就回答这个问题:

这是内容的一部分还是设计的一部分?

如果你不能回答这个问题，你可能不知道你在做什么或你想做什么!

此外，不要仅仅因为你想要“打印机友好型”而考虑这两种技术。也不要从SEO的角度用CSS隐藏内容。如果您发现自己在CSS文件中管理内容，那么您是在搬起石头砸自己的腿。这只是什么是内容或不内容的一个微不足道的决定。其他方面都应该被忽略。

前景= img。

Background = CSS背景。

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

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

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

当鼠标悬停在图像上时，希望图像发生变化。 当您想要添加圆角的图像。如果使用img，图像会从圆角中泄漏出来。