img插入的图片会显示，而你用background弄的背景不会显示出来。
用 img 还是 css背景 就业根据你的内容来定了，大体原则是尽量页面设计表现上的东西用背景，产品、照片等内容用 img 插入。
比如一个网页正文上的大标题 h1~h6 ，本来这样就可以实现：
<h1>某某公司发展大事记</h1>
<p>1992年，那是一个春天，有个老头在我国的南边划了一个圈...</p>
<img src="123.jpg" alt="那个老人的照片" />
<p>2011年，我公司著名程序猿张小龙在微信上面又划了一个圈...</p>
<img src="234.jpg" alt="张小龙开发微信的照片" />
为了设计上的美观，某某公司发展大事记 这几个字要设计成独特又不常用的字体，那就得做成图片，然后这里就该 html 代码不变，用背景图来展示：
<h1 id="test">某某公司发展大事记</h1>
#test{
1.设成图片宽高
2.块级元素
3.background: url(载入背景图)
4.文本缩进 -1000em 把文字隐藏掉
}
这样人看到的是图片文字标题，对于抓取你页面的程序，它们看到的是更适合它们胃口的<h1>字段文字。接下来那两张重要的很能体现你公司高大上形象的照片，就要用 img 插入了，否则，没样式时人看不到，搜索引擎、Rss订阅器等程序爬你网页时，也看不到。
在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然?如下场景使用img标签比较合适：
1、如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人)，使用Img标签加上alt属性。
2、如果你想打印页面并且你想要的图像包括默认情况下使用IMG。
3、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
4、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
5、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
6、使用img代替有背景图像可以显著提高性能的动画背景。
7、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。
如下场景使用background-image属性比较合适：
1、如果图像不是内容的一部分时使用backgrond-image。
2、当图像代替文本使用时使用backgrond-image。
3、如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。
4、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
5、如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。
6、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。
img默认是个行内元素，比如在img的前面或后面放一些文字，这些文字会与图片排在同一行。因此，当图片的前后存在一些空格或回车换行符时，它们会与图片一起成为同一块行内元素，从而会造成外面的div被撑得比你想象的尺寸要大一些，比如：<div><img src="..."/></div>而如果是这样就不会：<div><img src="..."/></div>如果给img的css添加display:block属性，它就会变成块级元素（它会独占一行），其前后的空格、回车等也会被自动忽略，这样外面的div的尺寸就会保持与img一致。
