一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别:

1. css中的图片以背景图形式存在,写在html中的图片以标签形式存在。而在网页加载过程中,以css背景存在的图片会等到html结构加载完成才开始加载,而html中的img标签是网页结构(内容)的一部分会在加载结构的过程中加载。

附:在一个单纯由Html和Css组成的页面中,背景图片总是最后加载的,那么假若我们想要使用较小的背景图片作为占位符,用于在加载较大的图片或者Flash文件时给用户以提示,大部分时候恐怕是达不到效果的,因为背景图片有时甚至会在大图片或Flash文件加载完成之后才会被加载。

2. 通常非内容的图片(即用来修饰页面的元素)就写在css里,如果是内容性的图片就写在html中。比如,你要做一个漂亮相框的相册,那么修饰边框的图片就写在css里,相框里的内容照片就写在html中。

3. 图片作为背景,在图片没有加载或者加载失败时,不会有个图片的占位标记,不会出现红叉。

css背景图与html插入img的区别的更多相关文章

  1. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

  2. html的css背景图的repeat

    HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...

  3. vue的挖坑和爬坑之css背景图样式终极解决方法

    原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...

  4. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  5. css背景图等比例缩放,盒子随背景图等比例缩放

    很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...

  6. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  7. css背景图定位和浮动

    网站图标引入:<link rel="shortcut icon" href="ico图标地址"> 背景图片  background-image: u ...

  8. CSS背景图拉伸自适应尺寸,全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

  9. css背景图撑开盒子高度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. reverse string | leetcode

    思路:在原来的字符串后面添加上strlen-1个字符,返回 class Solution { public: string reverseString(string s) { unsigned int ...

  2. Java实现Http服务器(四)

    (1)HTTPServer的监听启动 sun.net.httpserver.ServerImpl类中启动了Socket监听,ServerImpl的内部类Dispatch类启动了Http服务器的监听 / ...

  3. 非常好用的正则表达式"\\s+" - 匹配任意空白字符

    说起来,博主使用过的正则场景虽然不多,但是就是在这当中,我发现"\\s+"真好用! 详解 "\\s+" 正则表达式中\s匹配任何空白字符,包括空格.制表符.换页 ...

  4. asp.net中水印的实现代码

    水印是为了防止别盗用我们的图片. 两种方式实现水印效果 1)可以在用户上传时添加水印. a)   好处:与2种方法相比,用户每次读取此图片时,服务器直接发送给客户就行了. b)   缺点:破坏了原始图 ...

  5. Linux Shell编程(24)——命令替换

    命令替换 将会重新分配一个命令[1]甚至是多个命令的输出; 它会将命令的输出如实地添加到另一个上下文中. [2]使用命令替换的典型形式是使用后置引用(`...`). 后置引用形式的命令(就是被反引号括 ...

  6. 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to

    警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 警告: [SetPro ...

  7. MYSQL删除以数字开头的字段

    例子: // 删除以0开头的字段 DELETE FROM `week_energy_copy` WHERE openid like '0%'; // 删除以数字开头的字段 DELETE FROM `w ...

  8. 有关Ant编译

    今天给一个项目做jar包,从之前的项目拷贝了build文件,改了改,运行,结果有问题.编译时不打出任何信息,也不报错,从目标文件看,似乎拷贝等任务都执行了,但是编译没有执行.网上Google结果都说是 ...

  9. unity3d Realistic eye shading 真实的眼睛渲染

    先放上效果 人皮都做了,当然要来研究下眼睛,眼睛要比人体皮肤简单一些(实时模拟人皮在此) 一看是不是很复杂 这是眼睛的解构,但是,我们只需要模拟出虹膜巩膜和角膜就能达到相当真实的眼睛 巩膜就是白眼球 ...

  10. Ethernet & IEEE 802.3 802.X 802.1ag-MEP

    ISO/IEC 7498标准,它定义了网络互联的7层框架,也就是开放式系统互连参考模型(OSI模型). 交换机好比是邻近的街道,而路由器则是街道的交汇点. (交换机第二层,即数据链路层,也有四层,七层 ...