结果是相同的，但是我想在HTML中使用img标签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)
}
这是不够的，只是提供一个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-imagesrcbackground-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 or或 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。
但是，如果您使用这些样式，则可能不应该使用img标签作为容器。div具有语义含义的一个或其他类型的包含元素将更适合此工作。
关于alt文本，如果src属性中定义的图像无法加载，则alt属性值将按预期显示；否则，显示为0。而alt赋予CSS应用图像的属性则始终显示，并根据文本基线调整inline-block元素的对齐方式。
#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" />本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句