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更加灵活。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 发现问题的地方:在模拟百度首页进行制作的时候,在百度的搜索文本框中有一个小照相机,这个照相机是一个图片的一部分,在...
    松鼠煮鳜鱼阅读 8,065评论 0 1
  • 两者表现起来的效果是类似的,但是选用的时候应该有一些细微的区别。区别如下: background-image无法使...
    海娩阅读 7,744评论 1 2
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 4,887评论 0 0
  • 基础问题 = 和 == 和 === 的区别?= : 用于赋值== : 用于判断=== : 用于判断,必须类型和值同...
    雪落丶阅读 4,524评论 0 1
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,664评论 0 8

友情链接更多精彩内容