只是在工作中抛出一个扳手-我的意见是，你不应该使用img标签。HTML意味着内容，而不是视觉风格。你页面上的所有图像都应该来自CSS，让你的HTML代码纯粹。(即使它确实需要更长的时间来构建)

只是一个小的添加，你应该使用img标签，如果你想让用户能够“右键单击”和“save-image”/“save-picture”，所以如果你打算将图像作为资源提供给其他人。

使用背景图像将(据我所知在大多数浏览器上)禁用直接保存图像的选项。

如果您将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来自动化该过程)。

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

在多个皮肤或设计版本的情况下使用CSS背景图像。Javascript可以用来动态地改变一个元素的类，这将迫使它呈现不同的图像。如果使用IMG标签，可能会更加棘手。

当我想让它们100%可拉伸时，我使用image而不是background-image，大多数浏览器都支持。

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

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