使用img标签和背景图片之间的区别

1.img

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

img标签虽然不是块状元素，可是能够设置宽高，占位，

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

2.background-image

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

它所在的元素必须指定height，不然背景图片显示不出来，能够不指定width，若是不指定width，它的宽度则继承父元素的宽度

3.它们之间的不一样

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

4.加载问题

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

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

在网页加载的过程当中，背景图片会等到结构加载完成（网页的内容所有显示之后）才开始加载，而img标签

是网页结构（内容）的一部分会在html结构加载的过程当中加载，换句话讲，网页会先加载img标签的内容，

再加载背景图片，若是你用引入了一个很大的图片，那么在这个图片下载完成以前，img后的内容都不会显

示。而若是用css来引入一样的图片，网页结构和内容加载完成以后，才开始加载背景图片，不会影响你浏

览网页内容。(即，img是内容性的，背景图是修饰性的)

5.加载失败显示问题

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

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

6.数据图与非数据图

所谓数据图就是从后台获取的图片，通常就用img标签显示，其余的图片通常就做为背景图展现

7.什么时候用img，什么时候用背景图

1》使用img

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

2》使用背景图

• 不是html结构的一部分
• 图像代替文本使用时
• 缩短下载时间时
• 为不一样的屏幕分辨率展现不一样的图像时(media查询时使用背景图)
• 做为背景图片
• 禁止用户保存图片(点击鼠标右键另存为操做)
• 容许图片拉伸，平铺，截取等状况

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

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

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