结果是相同的，但我猜想在 HTML 中使用 img 标签 src 属性设置图像和在 CSS 中设置图像样式之间存在差异。例如：
In HTML:
<img src="//notrealdomain.com/some.png">
and
In HTML:
<img id="my-pic" src="">
In CSS:
#my-pic {
background-image: url(//notrealdomain.com/some.png)
}
让我们通过比较来看看。
仅仅提供一个是不够的background-image财产，因为img元素没有固有的height or 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 and 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 and 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 and 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, and background-size.
但如果您使用这些样式，您可能不应该使用img标记为您的容器； Adiv或其他类型的具有语义含义的包含元素将更适合这项工作。
关于alt文本，如果在中定义的图像src属性加载失败，值为alt属性按预期显示；而一个alt赋予 CSS 应用图像的属性始终显示，并根据文本基线调整内联块元素的对齐方式。
#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" />
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
