结果是一样的，但我猜在HTML中使用img tag src属性来设置图像和CSS中的样式图像之间存在差异。例如：
在HTML中：
<img src="//notrealdomain.com/some.png">
和
在HTML中：
<img id="my-pic" src="">
在CSS中：
#my-pic {
background-image: url(//notrealdomain.com/some.png)
}
答案 0 :(得分：2)
仅仅提供background-image属性是不够的，因为img元素没有固有的height或width以及background-image属性无法以与设置src属性相同的方式自动提供。因此，如果没有声明的尺寸，CSS应用的图像就不会显示。
#my-pic {
background-image: url(//placehold.it/150);
}<img src="//placehold.it/150" />
<img id="my-pic" src="" />
如果您希望img标记的行为与width类似，则可强制height标记background-image和src等于background-image的标记} - 应用的图像。注意：在某些浏览器中，损坏的图像占位符图标将显示在#my-pic {
display: inline-block;
width: 150px;
height: 150px;
background-image: url(//placehold.it/150);
}。
<img src="//placehold.it/150" />
<img id="my-pic" src="" />img
但是这具有原生src和height属性组合不具备的限制，例如只能定义width 或 #my-pic {
display: inline-block;
width: 150px;
background-image: url(//placehold.it/300);
}并保留自然约束。
<img src="//placehold.it/300" width="150" />
<img id="my-pic" src="" />width
此外，将height和background-image设置为除自然维度以外的任何其他内容，只会裁剪img，而不是以#my-pic {
display: inline-block;
width: 300px;
height: 150px;
background-image: url(//placehold.it/300);
}本机行为的方式强制约束它
<img src="//placehold.it/300" width="300" height="150" />
<img id="my-pic" src="" />background-attachment
您可以使用其他属性来实现各种结果，例如background-clip，background-origin，background-position，background-repeat，background-size和{{ 1}}。
但是如果您使用这些样式，您可能不应该使用img标记作为容器;具有语义含义的div或其他类型的包含元素将更适合于该作业。
关于alt文本，如果src属性中定义的图像无法加载，则alt属性的值将按预期显示;而始终显示赋予CSS应用图像的alt属性，并根据文本基线调整内联块元素的对齐方式。
#my-pic {
display: inline-block;
width: 150px;
height: 150px;
background-image: url(http://placehold.it/150);
}
#my-pic-failed {
display: inline-block;
width: 150px;
height: 150px;
background-image: url(//failedtoload.png);
}<img src="http://placehold.it/150" alt="Alternate text"/>
<img src="//failedtoload.png" alt="Alternate text"/>
<img id="my-pic" src="" alt="Alternate text" />
<img id="my-pic-failed" src="" alt="Alternate text" />
答案 1 :(得分：0)
两者之间的主要区别在于，一个用于背景（css），另一个用于前景（html）。
Foreground Image (i.e. <img> tag) = content
Background Image (i.e. image specified in CSS) = design
阅读以下链接中的完整文章。
答案 2 :(得分：0)
通过使用img标签，您可以设置背景和前景图像，但通过使用css，您只能设置背景图像。 所有其他属性都可以在内联css和外部css中设置