专栏首页木子墨的前端日常到底该用img还是background-image?

到底该用img还是background-image?

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

项目

image

backgroud-image

所属

dom元素、内容类、

css样式、修饰类、

图层位置

前景

背景

默认初始尺寸

不定

固定

是否会产生回流重绘

不会

图片加载失败

dom尺寸默认0,点击事件难以响应

dom背景无,其他点击事件正常

样式文件加载失败

正常显示

dom消失

使用场景

logo、产品图片、广告图片

背景图、角标等

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React-Native开发笔记 持续更新

    1、css单位转换px2dp 在做页面开发的时候习惯了用rem去做css单位,处理各种尺寸数据,到了React-Native里面做app开发时,rem就不好用...

    木子墨
  • react-navigation 使用笔记 持续更新中

    React-Navigation是目前React-Native官方推荐的导航组件,代替了原用的Navigator。最近开始接触,做个笔记

    木子墨
  • CORS跨域模型浅析及常见理解误区分析

    CORS跨域资源共享是前后端跨域十分常用的一种方案,主要依赖Access-Control-Allow(ACA)系列header来实现一种协商性的跨域交互。

    木子墨
  • 大数据和云计算技术周报(第40期):NoSQL特辑

    本期有 HBase、HBase+ES、StreamSets、explain、Cassandra、Redis。 希望大家会喜欢!

    大数据和云计算技术
  • 深度残差收缩网络(五)实验验证

    实验部分将所提出的两种深度残差收缩网络,即“通道之间共享阈值的深度残差收缩网络(Deep Residual Shrinkage Networks with Ch...

    用户6831054
  • Android多点触控技术实战,自由地对图片进行缩放和移动

    在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的。...

    用户1158055
  • 根据星星的层数输出星星(*)_java版

    =============================================================

    Hongten
  • springMvc4+hibernate4的一个奇葩的网上众说纷纭的错误

    springMvc4+hibernate4项目运行报错如下: org.hibernate.HibernateException: Could not obtai...

    小柒2012
  • Linux基础(day44)

    11.22 访问日志不记录静态文件 访问日志不记录指定类型的文件目录概要 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 把虚拟主机配置文...

    运维小白
  • [android] 加载大图片到内存

    默认情况下,android程序分配的堆内存大小是16,虚拟机上面的VM Heep就是设置它的

    陶士涵

扫码关注云+社区

领取腾讯云代金券