两者表现起来的效果是类似的,但是选用的时候应该有一些细微的区别。
区别如下:
- background-image无法使用懒加载,而img标签可以通过设置其src进行懒加载的实现
- 加载顺序不同: background-image是css属性,img标签中如果有src会立即请求,img会优先background-image进行请求
- 图片设置性不同:background-image 可以借助其本身css属性中的background-position、background-size来设置图片展示的位置关系,大小显示关系,而img标签无法直接设置其图片显示位置
- img标签能更好的SEO,是html标签,代表文档内容,而background-image属于css,代表版式设计。而言之,img标签能更好的SEO,而background-image更加灵活。