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. 配置Java文件

    下载jdk https://www.oracle.com ----------------------------------------------------------------------- ...

  2. linux 下搭建php环境

    linux 下搭建php环境 1.下载apache (http://httpd.apache.org/download.cgi) 下载php组件 ( http://cn2.php.net/get/ph ...

  3. 聊聊OSM

    聊聊OSM 做路网的同学一定对OSM并不陌生,OSM是一个由英国人Steve Coast创立的一个项目,这个项目的目标是创建一个内容自由,且能让所有人编辑的世界地图.类似于维基百科的概念.和它对标的是 ...

  4. 【朝花夕拾】四大组件之（二）Service篇

    一.Service是什么 对于这个问题,想必大家都能说出一二,如“它是四大组件之一”.“在后台处理一些操作”等.咱们这里看看官方文档中的描述,官方语言一般都是准确且言简意赅的,这里可以体验一下其风格. ...

  5. AsyncTask原理

    一.概述 Android开发中我们通常让主线程负责前台用户界面的绘制以及响应用户的操作,让工作者线程在后台执行一些比较耗时的任务.Android中的工作者线程主要有AsyncTask.IntentSe ...

  6. spring-security实现的token授权

    在我的用户密码授权文章里介绍了spring-security的工作过程,不了解的同学,可以先看看用户密码授权这篇文章,在 用户密码授权模式里,主要是通过一个登陆页进行授权,然后把授权对象写到sessi ...

  7. 点击菜单选项，右侧主体区新增子界面（Tab）的实现

    今天是2019年小年后一天,还有三天回家过年. 今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面.一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区.有一种效 ...

  8. 38.QT-QAxObject快速写入EXCEL示例

    参考链接:https://blog.csdn.net/czyt1988/article/details/52121360 http://blog.sina.com.cn/s/blog_a6fb6cc9 ...

  9. 使用cobbler工具实现centos 6，7系统的自动化安装

    vmware里面准备两台虚拟机,一台用于安装cobbler服务器,另一台当作测试机使用,cobbler服务器需要两块网卡,一块需要连接外网,需要使用epel源.测试机使用一块仅主机的模式的网卡,注意要 ...

  10. dubbo-源码分析Consumer

    counsumer使用服务的时候会在xml中配置<dubbo:reference> dubbo在spring.handles里的NamespaceHandle又有如下配置: registe ...