码迷,mamicode.com
首页 > 其他好文 > 详细

到底该用img还是background-image?

时间:2018-08-08 00:29:56      阅读:479      评论:0      收藏:0      [点我收藏+]

标签:内容   情况下   加载失败   完整性   img   页面   用户交互   遇到   就是   

在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式实现,哪种更好呢?
一般情况下,可能就是哪种顺手用哪个,因为都能实现需要的功能,但如果都是这样的话,html也就没必要做两个标签了。下面就来看一下两者的区别:

项目 image backgroud-image
所属 dom元素、内容类、 css样式、修饰类、
图层位置 前景 背景
默认初始尺寸 不定 固定
是否会产生回流重绘 不会
图片加载失败 dom尺寸默认0,点击事件难以响应 dom背景无,其他点击事件正常
样式文件加载失败 正常显示 dom消失
使用场景 logo、产品图片、广告图片 背景图、角标等

从上面可以看出来,img更适合作为内容部分渲染到页面里面,即便样式文件加载失败,也要让用户可以看到的,属于必须要的元素,特别适合作为广告宣传、产品展示类的使用。
而background则相对更适合做修饰类的,即便没能正常加载也并不影响页面整体的内容展示和用户交互,属于锦上添花类型的。

但是这两种方式又都存在着表中所列出的一些问题,针对这些问题,可以做如下优化:
1、img标签指定宽高尺寸,避免页面回流重绘。指定alt属性或者默认图片,在图片加载失败的时候备用。
2、logo元素同时使用img标签和background,并指定不同的图片源,比如一个用资源服务器图片,一个用base64编码(合适的话),避免那个元素加载不出来导致宣传效果达不到。

其实说了这些,也还是要看个人的开发习惯和保证产品完整性需要,下回见吧

到底该用img还是background-image?

标签:内容   情况下   加载失败   完整性   img   页面   用户交互   遇到   就是   

原文地址:https://www.cnblogs.com/heioray/p/9392821.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!