html中图片显示方式-----img与background的区别-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本章给大家介绍html中图片显示方式-----img与background的区别，让大家可以了解在html中让图片显示的两种方法的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、从解析机制看

img属于html标签，background是css方法。一个页面由html、css、js组成，按照浏览器解析机制，html标签优先解析。大家都知道css文件会放在head加载，但是这并不意味着它会立即执行，而是在html加载完后才执行的。所以重要的元素，如logo就应该使用img。

如果仅仅是为了显示一张图片，比如banner、广告图等，建议采用background方式。因为不重要的自动往后排，避免占用带宽，造成数据阻塞。

如果图片很多，这里又出现一个新的问题，不同的浏览器支持的并发加载数量是不一样的，（最新测试）IE是10个，FF是10个，图片多，就会出现严重的延迟或者404，因为图片加载慢会影响到页面主要数据呈现，那么让用户看到的都是空白，你好意思让他继续等下去吗！所以，如果不采用lazyload还是采用background比较好。

img标签优点是自闭和，可以避免空标签出现（空标签也是w3c验证的内容之一）。采用background方式就会出现空标签，bootstrap中的icon都是用i标签加入的，而i标签中是空内容，这样就产生了空标签（并不是说这样做不好，利弊等会聊）。

二、从SEO角度看

刚才说了，img标签是自闭和的，不能添加文本内容，但是，img有一个alt属性，而且这个属性在w3c标准中，要求必须有，这样做的优点还是很多的。

第一，图片比较大，或者用户网速比较窝火的时候，加载失败了，至少还有文字提示告诉用户这里是个什么内容的图片。如果用户非要看这个图，那就多刷几次去加载。另外，alt属性有利于辅助阅读，尤其是对盲人朋友，他们使用阅读器浏览页面，如果没有文本提示，就太不厚道了。

阅读剩余部分