img 和 background-image 的使用选择
简单来说,img
是内容部分的东西,background-image
是修饰性的东西。
稍微加点文字就是
img
从页面元素来说,如果是页面中的图片是作为内容出现的,比如广告图片,比如产品图片,那么这个必然是用img
了,因为这个是页面元素内容。页面元素内容最关键的一点就是,当页面没有样式的时候,还是能一眼看过去就知道什么是什么……
background-image
背景图片,修饰性的内容,在页面中可有可无。有,是为了让页面中视觉感受上更美;无,并不影响用户浏览网页获取内容。
裸奔
其实说白了,背景图片就是通过样式加载后,让页面更漂亮而已,内容图片就是为了展示给用户的。假设有一天你的网页没有任何样式的时候,那么这个时候请想想你的网站上哪些图片是给用户看的,这样就足够了。
前景图img
是数据性的东西,属于页面要展现的内容。
背景图是修饰性的东西,不要也罢。
比如,用户图像,肯定是前景图了;产品列表的图片,也是前景图了。
但是产品列表的图片,有的左上方有个推荐的标签,减价的标签,肯定就是修饰咯。
原理上的区别:
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标签中是空内容,这样就产生了空标签(并不是说这样做不好,利弊等会聊)。
总结:
1.写在css里面的图片是以背景图形式存在的,而写在html里的是以html插入img的区别标签形式存在的,在网页加载的过程中,以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载
2.通常是非内容的图片就写在css里面,如果是内容性的图片就写在html里面网页设计方向是表现层和内容层分离,css管表现,也就是显示效果,html管结构,内容结构的划分,这样代码要简洁易维护一些。
3.浏览器读取页面,css背景图和img图片都会下载到本地缓存文件夹,css背景图和img图片在网页中都可以重复使用。
4.图片做为背景,在图片没加载的时候或者加载失败的时候,不会有个图片的占位标记,不会出现红叉。