关于background-image和img的区别

img

是html中的一个标签，用于向网页中嵌入一幅图像。例如：

<img src="/Marcus/mypicture" alt="这是一张照片">

从技术上讲，img标签并不是在网页中插入图像，而是在网页中连接图像，img标签的作用是为被引用的图片创建占位符。
alt属性在图片无法被加载的时候显示信息。

background-image

background-image是CSS里面的一个方法，用来为元素添加背景（图片）。例如：

.box{
    background-image:url("```");
 }   
<div class="box"></div>

此时被引用的图片将会作为div元素的背景。

---

区别

• img是html里面的一个标签；background-image是CSS中的一个属性，用于为元素设置背景图片。
• 加载顺序不一样。 img标签作为html标签，使用src引入图片，别的资源会被中断加载；而CSS引用使用href引入，可以与别的资源并行加载。所以img标签会比background-image优先加载。
• 一般来说，作为修饰的不进行操作的图片选择使用background-image，而比较重要的与网页内容相关的就使用img标签。