1.加载问题

背景图片会等到html结构加载完成才开始加载

img标签是网页结构的一部分，会在html结构加载的时候加载

在网页加载的过程中，背景图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而img标签

是网页结构（内容）的一部分会在html结构加载的过程中加载，换句话讲，网页会先加载img标签的内容，

再加载背景图片，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显

示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏

览网页内容。(即，img是内容性的，背景图是修饰性的)

2.加载失败显示问题

背景图片在加载失败或路径找不到时，不会显示图片标记，

img标签在加载失败或找不到路径时，会显示一个撕裂的小图标标记

3.数据图与非数据图

所谓数据图就是从后台获取的图片，一般就用img标签显示，其他的图片一般就作为背景图展示

4.何时用img，何时用背景图

1》使用img

  • 作为html结构内容的一部分
  • 展示从后台传过来的数据
  • 对图片进行缩放操作
  • 利于搜索引擎搜索时

2》使用背景图

  • 不是html结构的一部分
  • 图像代替文本使用时
  • 缩短下载时间时
  • 为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)

相关资料：https://my.oschina.net/u/3680343/blog/1604073

作者：smile.轉角

QQ：493177502

【html】使用img标签和背景图片之间的区别的更多相关文章

  1. fontsize可以解决img标签插入图片之间的缝隙

    当我们用img标签连续插入多张图片的时候,图片和图片之间会出现缝隙,通常我们的做法是用DIV将图片包起来进行浮动来解决这个问题,但是还有一种解决方法是在img的父级元素里面设置font-size:0来 ...

  2. js 定时更改div背景图片

    今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...

  3. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  4. 【Javascript】IE8兼容 背景图片与a标签的onclick事件

    先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在 ...

  5. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  6. ie6下：png图片不透明 和 背景图片为png的节点的内部标签单击事件不响应

    1.png图片不透明 少量图片时:使用滤镜: _background:none; _filter:prodig:DXImageTransform.Microsoft.AlphaImageLoader( ...

  7. 清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片

    清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...

  8. swing实现QQ登录界面1.0（ 实现了同一张图片只加载一次）、（以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件）

    swing实现QQ登录界面1.0( 实现了同一张图片只加载一次).(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件) 代码思路分析: 1.(同一张图片仅仅需要加载一次就够了,下 ...

  9. 使用padding代替高度实现背景图片高度按比例自适应

    本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionat ...

随机推荐

  1. pyspider 文档介绍

    一 代码区结构 def on_start(self)是脚本的入口点.单击run仪表板上的按钮时将调用它. self.crawl(url, callback=self.index_page)*是这里最重 ...

  2. sdk和api的区别

    SDK SDK是Software Development Kit的缩写,中文意思是“软件开发工具包”.这是一个覆盖面相当广泛的名词,可以这么说:辅助开发某一类软件的相关文档.范例和工具的集合都可以叫做 ...

  3. ASP.NET Aries 高级开发教程：Excel导入之多表高级导入配置（中）

    前言: 在面对Excel的各种复杂导入情况中,多表导入是很常见的情景. 今天就来写一下多表导入是如何配置的. 1.自定义导入模板 怎么自定义: 其实就是自己新建一个Excel了,把列头都写好. 不过有 ...

  4. 实地探访：月薪 12K 的北京程序员是怎么工作生活的？

    阅读本文大概需要 4 分钟. “ 每个人都有自己的亲身经历,每个人都有一条生活道路.千万人千万条,各不相同,各有特点.但是并不是好人都有一条好路,坏人都有一条坏路,有的时候却恰恰相反.这虽然不是历史的 ...

  5. FragmentTabHostUnderLineDemo【FragmentTabHost带下划线】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用FragmentTabHost实现顶部选项卡(带下划线效果)展现. 效果图 代码分析 1.该Demo中采用的是FragmentT ...

  6. RDIFramework.NET代码生成器全新V3.5版本发布-重大升级

    发布说明 RDIFramework.NET代码生成器V3.5版本全新震撼推出,相比上次版本,本次发布新增与修改的内容如下: 1.全新增加了WinForm界面代码的生成,可直接生成常用的主界面(集新增. ...

  7. 浅谈mybatis如何半自动化解耦

    在JAVA发展过程中,涌现出一系列的ORM框架,JPA,Hibernate,Mybatis和Spring jdbc,本系列,将来研究Mybatis. 通过研究mybatis源码,可将mybatis的大 ...

  8. Java基础系列-Collector和Collectors

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/10748925.html 一.概述 Collector是专门用来作为Stream的coll ...

  9. [转]nodejs日期时间插件moment.js

    本文转自:https://blog.csdn.net/dreamer2020/article/details/52278478 问题来源js自带的日期Date可以满足一些基本的需求,例如格式化.时间戳 ...

  10. FLASHBACK介绍

    在介绍flashback之前先介绍下undo_retention相关参数 undo_retention:表示undo数据的过期时间.系统默认这个时间设置为900即15分钟.但要注意,保证undo数据在 ...