HTML直接插入图片和css使用背景图片区别

发表于 更新于 分类于

img

1
<img src="图片来源" alt="图片无法显示时显示图片说明性文字" style="设置样式属性" />

  • img 标签虽然不是块状元素，但是可以设置宽高，占位

  • img 设置 width 后 height 会自适应匹配，如果设置 height 后 width 会自适应匹配,如果同时设置 width，height，img 图片可能会变形

background-image

  • css 的一个样式，并不占位，可以结合 background-size,background-repeat,background-position 等属性来设置图片位置，大小等

  • 所在的元素必须指定 height，否则背景图片显示不出来，可以不指定 width，如果不指定 width，它的宽度则继承父元素的宽度

区别

  • img 是 html 标签，占位，background-image 是 CSS 样式，不占位
  • img 是 document 对象可以操作(比如：从 document 对象中删除)，background-image 是不能操作的
  • 在网页加载过程中，img 作为网页结构内容的一部分，会在加载结构的过程中加载，而 background-image 作为 css 样式的一部分，会在结构加载完成后开始加载。(如果你引入了一个很大的图片，在这个图片下载完成之前，img 后面的内容都不会显示，而如果用 css 引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。)
  • img 标签点击会选中或放大图片，background-image 则不会

加载问题

  1. 背景图片会等到 html 结构加载完成才开始加载
  2. img 标签是网页结构的一部分，会在 html 结构加载的时候加载
  3. 在网页加载的过程中，背景图片会等到结构加载完成（网页的内容全部显示以后）才开始加载。
  4. img 标签是网页结构（内容）的一部分会在 html 结构加载的过程中加载，换句话讲，网页会先加载 img 标签的内容，再加载背景图片，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img 后的内容都不会显示。
  5. 用 css 来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。(即，img 是内容性的，背景图是修饰性的)

加载失败显示问题

  • 背景图片在加载失败或路径找不到时，不会显示图片标记，

  • img 标签在加载失败或找不到路径时，会显示一个撕裂的小图标标记

数据图与非数据图

所谓数据图就是从后台获取的图片，一般就用 img 标签显示，其他的图片一般就作为背景图展示

何时使用

使用 img

  1. 使用 IMG(alt 文本)图像有一个重要的语义时，比如一个警告图标。这将确保图像的意义可以很好的和 user-agents 沟通，包括屏幕阅读器（宣传、产品图片等）
  2. 作为 html 结构内容的一部分
  3. 展示从后台传过来的数据
  4. 对图片进行缩放操作
  5. 利于搜索引擎搜索时
  6. 有明确的语义化要求
  7. 图片作为页面的组成部分而不是修饰部分
  8. 使用 img 代替有背景图像可以显著提高性能的动画背景
  9. 显示图片只给定宽或高且不能截断图片，并且保证图片宽高比

使用背景图

  1. 不重要的用作装饰、美化的图片
  2. 不是 html 结构的一部分
  3. 图像代替文本使用时使用 backgrond-image（避免出现无语义化标签）
  4. 缩短下载时间通过 CSS sprites 时使用 backgrond-image
  5. 为不同的屏幕分辨率展示不同的图像时(media 查询时使用背景图)
  6. 作为背景图片
  7. 禁止用户保存图片(点击鼠标右键另存为操作)
  8. 允许图片拉伸，平铺，截取等情况

background-size: 100% 100% 与 background-size: cover 之间的区别

background-size: 100% 100%; 按容器 比例撑满，图片会变形
background-size: cover; 把背景图片放大到适合元素容器的尺寸，图片比例不变