第二，alt属性有利于SEO，搜索引擎实现很好的图像识别还是有一段路要走。
当然缺点也是有滴：
第一，Img加载的图片是通过src拿到的，如果HTML代码不允许修改，那怎么换图，只有同名文件替换，但是有可能遇到304状态，需要服务器端做相应的设置。这时background的优点就出来了，换皮肤就是这个栗子。
第二，如果图片显示区域空间大小是预留的，那么图片必须和预留的空间一致，否则图片要么被拉伸要么被压缩，都不是等比例操作。当然，避免这种问题就需要前端和视觉设计师遵守一定的规范。
三、语义化角度
background和语义化不沾边了，img是HTML标签，语义明确。
建议：重要的需要优先加载的图片最好采用img。不重要的图片最好采用background。
做SEO是最方便的还是background，图片是放在背景上的，前景写内容，两不误。如果不想让内容显示出来，就加text-indent， -99999你懂的。（以前有这种玩法，是搜索引擎算法单一的年代，关键字比重高 排名就靠前）。
刚才提了一下bootstrap的background方法，bootstrap的做法是用background设置icon，icon的使用太灵活了，所以必须模块化，语义化先靠边站，鱼与熊掌不可兼得。PS：bootstrap v3之后采用了icon font
其次icon的重要性真不高，放在最后加载还减少了带宽占用量，提高PV速度。
img标签语义很明确不能乱用，所以bootstrap采用无语义的i标签来设置icon也挺好。PS：自己项目中使用无语义标签要注意是否向前兼容，要关注HTML5中的定义
以上就是html中图片显示方式-----img与background的区别的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《img》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
