2020-11-11

​1.是否占位

      background-image是背景图片，是一个css的样式，不占位；<img/>是一个块状元素，它是一个图片，是HTML的一个标签，是要占位的。

2.能否操作

       background-imag是css的样式，只能设置background-position、background-attachment、background-repeat；

         <img/>是一个document对象，它是可以被操作，可以更换img的src路径达到更换图片的作用，还可以移动它的位置，或者从document中移除等等....如果是装饰性的图片的话使用background-image比合适，如果和文本内容很相关的话就使用<img/>标签。

3.加载的顺序不同

      在网页加载过程中，以css存在的背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示完成以后），才开始加载；而HTML的标签<img>是网页结构的一部分会在加载结构的过程中加载，换句话来说网页会先加载,img标签的内容，再加载background-image，如果你引入了一个很大的图片，那么在这个图片下载完成之前，img的内容都不会显示，而如果使用css引入同样的图片，网页结构和内容加载完之后才开始加载背景图片，不会影响你浏览网页的内容。

4.SEO的角度来看

      img标签有一个alt属性，而且这个属性在w3c的标准中，要求必须有，这样做的优点有很多。

      （1）图片比较大或者网速比较慢的时候，或者说加载失败了的时候至少还有文字提示告诉用户这个图片里面的内容，另外alt有助于辅助阅读，尤其是对无障碍开发的时候。

      （2）alt有利于SEO

缺点：

      （1）img加载的图片是通过src拿到的，如果HTML代码不允许修改那要换图的话只能同名文件的修改

      （2）如果图片显示区域空间的大小是预留的，那么图片的大小必须和预留空间一致，否则图片要么被拉伸要么被压缩，都不是等比的压缩。

5.从语义化的角度

      img表示的是页面内容的一部分，而background只是一个css样式，样式起的是一个装饰作用，所以当我们想显示的图片是网站想要展示给用户的内容的一部分的时候我们需要使用img.当这张图片起到装饰作用的时候，我们库使用background。

虽然说两者最终显示的效果是一样的，但是根据不同的使用目的我们需要柔性的调整我们最终选择哪种方法去实现

 

                                                                                                       关注微信公众号 “学识铺子” 回复 “img”即可阅读