background-image和img 标签都能加载照片，为什么在用的上面还有限制？来，豪晓得

小白看豪豪，豪豪不骄傲。欢迎老爷进来拜访，会失望吗？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-image和img 标签都能加载照片，为什么在用的上面还有限制？来，豪晓得相关推荐

[html] 说说video标签中预加载视频用到的属性是什么？
[html] 说说video标签中预加载视频用到的属性是什么? 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
Endnote在word中每次启动都要加载，或者无法加载的解决办法
第一次出问题之前endnote用的好好着,突然不知道咋了就没法自动加载了,每次打开Word都要重新加载,麻烦. 按照网上说的把explorer.exe删除然后重新打开,重新加载endnote,不起作 ...
用手机UC浏览器页面打开vue项目，图片，css，js都没加载
用手机UC浏览器页面打开vue项目,图片,css,js都没加载用HBuilder X创建了一个普通的vue项目,在电脑上使用浏览器看没有什么问题,然后提交到了公司的服务器上,发现用手机,除了火狐,谷 ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...
用video标签流式加载
video标签浏览器的video标签通常是接收一个src属性,然后浏览器就会根据这个src属性来自动加载视频. 这个过程是浏览器来加载video的. 这种方式有什么问题吗? mp4文件不能流式加载 ...
JavaScript script标签同步异步加载过程
同步加载同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作. <script src="http://xxx/script.js& ...
火狐新增标签一直加载_在Firefox的新标签页中加载最后标签页的URL
火狐新增标签一直加载 Yeah, you're pretty sure that you're the master of all things Firefox. I mean, why else ...
html a标签 onload,动态加载script和css标签的onload问题
在firefox下,动态加载script标签和css标签,是可以简单地监听onload事件的,但在ie下,监听onload事件无效.为了解决这个问题,可以改用监听onreadystatechange, ...
word中acrobat转Pdf文件标签丢失COM加载项被卸载的解决办法
常将Office文档转换成PDF,保证页面所见即所得,Acrobat在Office中的转换工具非常方便好用.将Word文档转换成PDF文档,使用的是Acrobat 9.0在Word 2007中的加载项 ...

background-image和img 标签都能加载照片，为什么在用的上面还有限制？来，豪晓得

background-image和img 标签都能加载照片，为什么在用的上面还有限制？来，豪晓得相关推荐

最新文章

热门文章