css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别:
1. css中的图片以背景图形式存在,写在html中的图片以标签形式存在。而在网页加载过程中,以css背景存在的图片会等到html结构加载完成才开始加载,而html中的img标签是网页结构(内容)的一部分会在加载结构的过程中加载。
附:在一个单纯由Html和Css组成的页面中,背景图片总是最后加载的,那么假若我们想要使用较小的背景图片作为占位符,用于在加载较大的图片或者Flash文件时给用户以提示,大部分时候恐怕是达不到效果的,因为背景图片有时甚至会在大图片或Flash文件加载完成之后才会被加载。
2. 通常非内容的图片(即用来修饰页面的元素)就写在css里,如果是内容性的图片就写在html中。比如,你要做一个漂亮相框的相册,那么修饰边框的图片就写在css里,相框里的内容照片就写在html中。
3. 图片作为背景,在图片没有加载或者加载失败时,不会有个图片的占位标记,不会出现红叉。
css背景图与html插入img的区别的更多相关文章
- Lodop打印控件不打印css背景图怎么办
background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...
- html的css背景图的repeat
HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...
- vue的挖坑和爬坑之css背景图样式终极解决方法
原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- css背景图等比例缩放,盒子随背景图等比例缩放
很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- css背景图定位和浮动
网站图标引入:<link rel="shortcut icon" href="ico图标地址"> 背景图片 background-image: u ...
- CSS背景图拉伸自适应尺寸,全浏览器兼容
突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...
- css背景图撑开盒子高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Socket理解
简介 本文主要介绍的socket编程的实现相关的内容: 理论 函数 socket 用来创建socket描述符,它唯一标识一个socket int socket(int domain, int type ...
- xfire实现webservice客户端之测试关注点
日前的工作接触到很多系统间的Webservice调用,这里想谈谈基于spring+xfire实现的webservice的客户端踩过的一些坑,需要测试关注的点. xFire的配置项 在spring中实现 ...
- Contest 20140923 登月计划 BabyStepGaintStep
登月计划 查看 提交 统计 提问 总时间限制: 40000ms 内存限制: 256000kB 描述 HJA在和学弟学数学,于是便有了一道非常简单的数学题:求满足 的最小自然数x. 输入 输入数据一 ...
- E: Write error - write (28 No space left on device)
1:在终端中运行cd命令,提示: e: Write error - write (28 No space left on device) E: Cant mmap an empty file 2:使用 ...
- Immutable Object模式
多线程共享变量的情况下,为了保证数据一致性,往往需要对这些变量的访问进行加锁.而锁本身又会带来一些问题和开销.Immutable Object模式使得我们可以在不使用锁的情况下,既保证共享变量访问的线 ...
- Java 字节码
Java作为业界应用最为广泛的语言之一,深得众多软件厂商和开发者的推崇,更是被包括Oracle在内的众多JCP成员积极地推动发展.但是对于Java语言的深度理解和运用,毕竟是很少会有人涉及的话题.In ...
- 如何监控 Nginx?
什么是 Nginx? Nginx("engine-x")是一个 HTTP 和反向代理服务器,同时也是一个邮件代理服务器和通用的 TCP 代理服务器.作为一个免费开源的服务器,Ngi ...
- Java OAuth开发包资料
原文地址:http://www.oschina.net/project/tag/307/oauth?lang=19&sort=time
- Fixing common issues when hosting a .NET 4.0 WCF service in IIS 7
http://sandrinodimattia.net/fixing-common-issues-when-hosting-a-net-4-0-wcf-service-in-iis-7/ Until ...
- 【转】XCode、Cocoa、Objective-C 的关系区别
原文网址:http://blog.sina.com.cn/s/blog_5e89e1ff0100z4k1.html Object-Ciphone开发用的编程语言不是c,c++,java 而是objec ...