1.使用 有一个好处是，用户可以很方便的右键保存或者复制图片的链接。

2.图片做为背景，在图片没加载的时候或者加载失败的时候，不会有个图片的占位标记，不会出现红叉。

PS：一般图片下载站会希望访客、用户去下载站内的图片，一般的企业或者站长其实并不希望同行或者竞争对手下载并盗用网站上的图片。第二点出现红叉应该是古老的IE浏览器才会出现，而且随着宽带网速的提升，这种情况并不多见。

3、 在网页加载的过程中，以css背景图存在的图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签是网页结构（内容）的一部分会在
加载结构的过程中加载，换句话讲，网页会先加载标签的内容，再加载背景图片，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，之后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。这算比较大的区别之一。

4.如果是装饰性的图片就写在css里面，如果是内容性的图片就写在html里面。 打个比方，你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。

如下场景使用img标签比较合适：

1、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
2、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
3、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
4、使用img代替有背景图像可以显著提高性能的动画背景。
5、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。

如下场景使用background-image属性比较合适：
1、如果图像不是内容的一部分时使用backgrond-image。
2、当图像代替文本使用时使用backgrond-image（避免出现无语义化标签）。
3、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
4、如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。
5、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。

css背景图使用

不是html结构的一部分

图像代替文本使用时

缩短下载时间时

为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)

作为背景图片

禁止用户保存图片(点击鼠标右键另存为操作)

允许图片拉伸，平铺，截取等情况(background-size:1000%;按容器 比例撑满，图片会变形;background-

img标签使用

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

目的是用来美化、装饰网页体现设计效果的图片用css背景图，网页里面主要内容图片用img标签插入。

想要图片做背景的时候用background-image，img标记是做不了背景的。

img标签使用

作为html结构内容的一部分

展示从后台传过来的数据

对图片进行缩放操作

利于搜索引擎搜索时

有明确的语义化要求

图片作为页面的组成部分而不是修饰部分

显示图片只给定宽或高且不能截断图片，并且保证图片宽高比

css背景图使用

不是html结构的一部分

图像代替文本使用时

缩短下载时间时

为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)

作为背景图片

禁止用户保存图片(点击鼠标右键另存为操作)

允许图片拉伸，平铺，截取等情况(background-size:1000%;按容器 比例撑满，图片会变形;background-size:cover;把背景图片放大到适合元素容器的尺寸，图片比例不变)

Q1.二者有何区别？
A1.写在css里面的图片是以背景图形式存在的，而写在html里的是以标签形式存在的，< style>在网页加载的过程中，以css背景图存在的图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的<>标签是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载<>标签的内容，再加载背景图片，如果你用<>引入了一个很大的图片，那么在这个图片下载完成之前，<>之后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。

Q2.什么图片插入在css，什么图片插入在html里面？
A2.如果是装饰性的图片就写在css里面，如果是内容性的图片就写在html里面，
打个比方，你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。
Q3.不知道怎样问了，扩展点说就更好。
A3.以后的网页设计方向是表现层和内容层分离，css管表现，也就是显示效果，html管结构，内容结构的划分，这样代码要简洁易维护一些。关于其他回答中的“像< />这种属于表现层的东西都会被丢弃的”这种说法是不正确的，内容中的图片还是要使用<>图标而不是css背景来引入。而“css图片可以复用，<>图片不能复用”这种说法也不正确，网页加载过程中相同的图片会下载一次并保存在缓存里面，其他地方的<>使用了同样的图片是不会再去下载的。图片也可以复用。

用来美化、装饰网页体现设计效果的图片用css背景图

1. 链入外部样式表

链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内，如下：

　　上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。

　　一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

　　样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下：

　　
　　2.内部样式表

　　内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用style标记插入的，从下例中可以看出style标记的用法：

　　注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：

　　3. 导入外部样式表 

导入外部样式表是指在内部样式表的style里导入一个外部样式表，导入时用@import，看下面这个实例：

　　例中@import “mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。 
注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。

　　
　　4. 内嵌样式

　　内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：

　　在style参数后面的引号里的内容相当于在样式表大括号里的内容。 
　　注意：style参数可以应用于任意BODY内的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。