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. [原创] 分享我们自己搭建的微信小程序开发框架——wframe及设计思想详解

    wframe不是控件库,也不是UI库,她是一个微信小程序面向对象编程框架,代码只有几百行.她的主要功能是规范小程序项目的文件结构.规范应用程序初始化.规范页面加载及授权管理的框架,当然,wframe也 ...

  2. 缓存穿透，缓存雪崩，热点key及解决办法

    1.穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法: 持久层查询不到就缓存空结果,查询时先判断缓存中是否exists(key) ,如果有直接返 ...

  3. 原生js显示消失

    function showModel() {document.getElementById('container_head').style.display = 'block';}function cl ...

  4. Vue(day7)

    一.环境搭建 下面我们需要为后面要做的Vue项目搭建开发环境. 1.基本的运行环境 该项目使用node& vue在webpack环境下进行开发.首先安装基本的模块文件: npm install ...

  5. golang的cms

    golang的cms 说说cms cms(内容管理系统)是建站利器.它的本质是为了快速建站.cms本质是一个后台服务站,使用这个后台,能很快搭建一个前台web站.在PHP的世界里面,CMS框架简直不要 ...

  6. ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)解决办法

    一,报错原因及分析 mysql的这个报错的原因是mysql服务没有正确启动就是mysqld这个程序. mysql要想运行需要mysql和mysqld两个都启动才行 二,解决办法 右键我的电脑——> ...

  7. knockoutjs data-bind 声明式绑定整理

    一.Visible绑定 1.功能 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 2.示例 <div data-bind="visible: shouldShowMessa ...

  8. SQL优化 MySQL版 - 索引分类、创建方式、删除索引、查看索引、SQL性能问题

    SQL优化 MySQL版  - 索引分类.创建方式.删除索引.查看索引.SQL性能问题 作者 Stanley 罗昊 [转载请注明出处和署名,谢谢!] 索引分类 单值索引 单的意思就是单列的值,比如说有 ...

  9. RabbitMQ消息队列（一）-RabbitMQ的优劣势及产生背景

    本篇并没有直接讲到技术,例如没有先写个Helloword.我想在选择了解或者学习一门技术之前先要明白为什么要现在这个技术而不是其他的,以免到最后发现自己学错了.同时如果已经确定就是他,最好先要了解下技 ...

  10. 微信公众号开发C#系列-5、用户和用户组管理-支持同步

    1.概述 眼前时下流行的经济有个叫粉丝经济,粉丝带动收益.一个好运营良好的公众号肯定会有一大批的粉丝团,如何挖掘粉丝来产生效益,是微信营销的关键.微信公众号后台本身提供了粉丝(用户)与用户分组的管理, ...