HTML页面插入图片，使用background还是img标签

　　很多新手在刚开始学习HTML标签的时候，老师一定会教你

<img src="xxx.png"/>

　　这种引入图片格式，第二天学习css的时候，老师又会教你给div等元素添加背景图片，

div {
     background-image: url(xxx.png);
}

　　那么这两种方式究竟孰优孰劣，分别应该在什么情况下使用呢？今天我在这里就给大家详细讲解一下：

　　关于img标签，我们要知道，它除了src路径以外，还有两个属性，一个是alt，一个是title

<img src="xxx.png" alt="" title=""/>

　　首先我们讲一下title，它的作用是什么呢？我们来看一下，当我们在body中写入以下代码的时候，

<img src="img/柯基.jpg" alt="" title="Hello，World！"/>

　　打开浏览器，会显示对应的那张图片，title里面写的"Hello，World！"是不显示的，只有当我们的鼠标放到图片上暂留的时候，鼠标上才会出现提示性文字如下图：

　　title属性是对元素的注释说明和额外补充，当鼠标放到文字或图片上时候，会显示title对应的文字。要注意的一点是，title这个属性并不是img标签特有的，加给button、div等其他标签都是可以的，我曾经看过一些文章，作者提议给网页中所有的标签都加上title属性，这样将来用户把鼠标放到每个按钮、图片、文字上，都有title提示，但是我看响应附和者寥寥，为什么呢，太麻烦了呗，你作为一个程序员你愿意多此一举吗，况且此举还会增加代码体积。

　　接下来我们再说说alt属性，alt其实就是你windows通用键盘空格左右的那个键，也是你吃鸡（PC端）的时候，可以自由转头的那个键，它的本意是替换的意思，alt属性在img标签里面是一个必须属性，其作用是当我们的图片，在用户的网络条件差、路径错误或者浏览器禁用图像等情况下，用户看不到这张图片，alt内的解释性文字会显示出来，使得用户即使看不到图片，也不会影响到对整个页面的浏览，如下图：

　　而且alt属性里的值还会被搜索引擎抓取到，比如你现在在百度搜索柯基，那么我们网页当中的这张图片就可能会被百度图片给抓取到，如下：

　　搜索引擎真的会分辨你网页当中的图片是不是柯基犬吗？人工智能有这么强大？可以智能识图？并不是的，搜索引擎是通过识别你网页当中的alt属性，来辨别本图片是不是它所要抓取的。我们的网站肯定是希望搜索引擎抓取到我们，这样我们的浏览量就会加大，我们的流量就会更多，我们就能赚取更多的广告费，我们就会更有银子。

　　其次，还有一个原因，img加载更快对于我们一篇HTML文档来说，浏览器对文档的加载是从上往下的，我们的css样式是在style标签内，当我们的浏览器加载到style标签的时候，它就会停下，跳过去，继续加载HTML，HTML加载完成后，才会继续加载css样式表，否则的话，假如我们在style标签内写了.div1{width:100px;}这时候浏览器并没有加载到body，因为我们的style标签是在head内，是在body上面的，这时候浏览器就无法找到div1并给其设置宽度。所以，如果论加载速度，还是body中的img标签加载更快。

　　最后呢，还有一个原因，是从用户体验角度来讲的。如果你在body 中通过img标签引入一张图片，那么用户在浏览网页的时候，是可以直接在图片上右键，然后另存为，把图片保存下来，但是background是不可以的；

　　还有一种情况比较少见：针对盲人用户，盲人用户眼睛无法直接看到网页，但是又有上网的需求，这时候，患者就可以借助一些读屏软件来浏览我们的网页，这时候问题来了，读屏软件可以阅读文字，可是它怎样阅读我们的图片给患者听呢？这是一个问题，所以这时候我们之前提到的alt属性的作用就来了，读屏软件可以直接阅读图片的alt属性值，从而使盲人用户看不到图片，也可以知道这里显示的是什么。

 　　所以，综上所述，一般情况下，在我们网页中主体用到的图片，尽量用img标签引入是最好的，但是这也并不是绝对，在网页中用到的logo等图标，我们一般用background来显示，或者该图片本就是背景图，我们就一定使用background。