This post was updated 831 days ago and some of the ideas may be out of date.

一、img

<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则不会

四、加载问题

背景图片会等到html结构加载完成才开始加载

img标签是网页结构的一部分,会在html结构加载的时候加载

在网页加载的过程中,背景图片会等到结构加载完成(网页的内容全部显示以后)才开始加载。

而img标签是网页结构(内容)的一部分会在html结构加载的过程中加载,换句话讲,网页会先加载img标签的内容,再加载背景图片,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。

而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。(即,img是内容性的,背景图是修饰性的)

五、加载失败显示问题

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

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

六、数据图与非数据图

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

七、何时用img,何时用背景图

1》使用img

  • 非常重要的图片(宣传、产品图片等)
  • 作为html结构内容的一部分
  • 展示从后台传过来的数据
  • 对图片进行缩放操作
  • 利于搜索引擎搜索时
  • 有明确的语义化要求
  • 图片作为页面的组成部分而不是修饰部分
  • 显示图片只给定宽或高且不能截断图片,并且保证图片宽高比

2》使用背景图

  • 不重要的用作装饰、美化的图片
  • 不是html结构的一部分
  • 图像代替文本使用时
  • 缩短下载时间时
  • 为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)
  • 作为背景图片
  • 禁止用户保存图片(点击鼠标右键另存为操作)
  • 允许图片拉伸,平铺,截取等情况

另论:记录下background-size:100% 100% 与background-size:cover之间的区别

background-size:100% 100%;按容器 比例撑满,图片会变形

background-size:cover;把背景图片放大到适合元素容器的尺寸,图片比例不变