background

admin管理员组

文章数量:1794759

background

        小白看豪豪，豪豪不骄傲。欢迎老爷进来拜访，会失望吗？nonono，完全不可能，言归正传，为什么在用的时候还有限制？首先我们来对比一下在页面中这两位客人的表演，background-image比较内敛，选择了在房间内展示演出。再看看img，天！一个人独自在外，左右各拿一个盾牌，还靠在一面樯前(  <img /> ),形容的自己觉得还行，还有其他形容方式，可留言告知吖~，这里主要想说，background-image是样式，只能用于一个标签内部去形容那标签的美，而img它可以作为一个个体去存在，这样看，确实img碾压background-image标签。可，一个个体真的就很好吗，不见得，这里我们中文网专业人士的对比，其中有修改一点点，因为自身觉得，能让读者快速阅读而不是将时间用在去想不重要的事情上。

首先：1、解析机制上看

img属于html标签，background是css方法，一个页面有html、css、js组成，按照浏览器解析机制，html标签优先解析。大家都知道css文件会放在head加载，但是这并不意味着它会立即执行，而是再html加载完后才执行的。所以如需使用logo标志的照片，可以优先去考虑使用img。若仅为显示一张图片，建议才用background-image。因为不重要的自动往后排，避免占用带宽，造成数据堵塞。如果图片很多，这里又会出现一个新的问题，不同浏览器支持的并发加载数量是不一样的，IE是10个，FF是10个，图片多，就会出现严重的延迟或者404，因为图片加载慢会影响到页面主要数据呈现，那么让用户看到的都是空白，你会好意思让等下去吗！所以，如果不采用lazyload还是采用background比较好。img标签优点是自闭和，可以避免空标签出现/采用background方式i就会出现空标签，bootstrap中的icon都是用i标签加入的，而i标签中是空内容，这样就产生了空标签。

2、从SEO角度看

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

第一，图片比较大，或者用户网速比较窝火的时候，加载失败了，至少还有文字提示并告诉用户这里是个什么内容的图片。如果用户非要看这个图，那几多刷新去加载几遍。

第二，alt属性有利于SEO，搜索引擎实现很好的图像识别还有一段路要走。

当然缺点也是有的：

一、img加载的图片是通过src拿到的，如果html代码不允许修改，那怎么换图，只有同名文件替换，但是有可能遇到304状态，需要服务器做相应的设置。这时background的优点就出来了，比如一些后台里的换肤操作，就是配合background实现的这一功能。

二、如果图片显示区域空间大小是预留的，那么图片必须和预留的空间一致，否则图片要么被拉伸要么被压缩，都不是等比例操作。当然，避免这种问题就要需要前端和视觉设计师遵循一定的规范。

3、语义化角度

background和语义化完全不沾边，而img是标签，语义明确。

建议：重要的需要优先加载的图片最好采用img。不重要的图片最好采用background

做SEO是最方便的还是background，图片是放在背景上，前景写内容，两不误。如果不想让内容显示出来，就加text-indent。

看完，恍然大悟了没有，开心是不是下面的三连可以来一个嘞，嘿嘿嘿嘿  -_-,哦哦忘了一件事，老爷们快来这里在线试试哟 ， 在线html编辑工具 ：W3School TIY Editor

本文标签： background