css background-image 与img标签的区别

两者表现起来的效果是类似的,但是选用的时候应该有一些细微的区别。
区别如下:

  1. background-image无法使用懒加载,而img标签可以通过设置其src进行懒加载的实现
  2. 加载顺序不同: background-image是css属性,img标签中如果有src会立即请求,img会优先background-image进行请求
  3. 图片设置性不同:background-image 可以借助其本身css属性中的background-position、background-size来设置图片展示的位置关系,大小显示关系,而img标签无法直接设置其图片显示位置
  4. img标签能更好的SEO,是html标签,代表文档内容,而background-image属于css,代表版式设计。而言之,img标签能更好的SEO,而background-image更加灵活。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,879评论 1 45
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,362评论 2 66
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,845评论 1 92
  • 不知不觉读羊皮卷已经成为我生活的一部分。每天有时间就不由读几句,尤其是情绪低落的时候,读一读羊皮卷,心情会立...
    跳跳_cec1阅读 122评论 0 0
  • 姓名:张景方 公司:上海日朗门窗有限公司 反省一组 【日精进打卡第71天】 【知~学习】 《六项精进》诵读2遍共5...
    威廉张豆豆爹阅读 115评论 0 0