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 ...
随机推荐
- 苹果搜索广告后台大揭秘,最全最细致详解,手把手设置教程「后附官方视频」-b
WWDC2016 搜索广告分会视频和 PPT 发布了,ASO100 带开发者第一时间了解 Search Ads 后台设置(文末有原声视频). 首先介绍一下搜索广告的模式和竞价规则 广告模式为 CPT( ...
- Hbase Java API程序设计步骤
http://www.it165.net/admin/html/201407/3390.html 步骤1:创建一个Configuration对象 包含了客户端链接Hbase服务所需的全部信息: zoo ...
- git实现版本回退
1. 首先查看自己的版本: ***:~/piaoshifu_object/epiao.piaoshifu.cn$ git log commit c8d5c67861d2d0e21856cc2b4f60 ...
- 与QString("我是中文")完全一样,你必须告诉tr这个窄字符串是何种编码?你不告诉它,它就用latin1。于是所谓的乱码问题就出来了。
在论坛中漂,经常遇到有人遇到tr相关的问题.用tr的有两类人: (1)因为发现中文老出问题,然后搜索,发现很多人用tr,于是他也开始用tr (2)另一类人,确实是出于国际化的需要,将需要在界面上显示的 ...
- 14.6.3.1 The InnoDB Buffer Pool
14.6.3.1 The InnoDB Buffer Pool InnoDB 保持一个存储区域被称为buffer pool 用于cache数据和索引在内存里, 知道InnoDB buffer pool ...
- 搜索提示時jquery的focusout和click事件沖突問題完美解决
在主流的搜索引擎上搜索時,輸入內容,往往會彈出智能提示.輸入框为input,智能提示區域为suggest.接下來一般有兩種操作: 1.選擇某一提示,則把內容复制到input中 ...
- 利用python分析nginx日志
最近在学习python,写了个脚本分析nginx日志,练练手.写得比较粗糙,但基本功能可以实现. 脚本功能:查找出当天访问次数前十位的IP,并获取该IP来源,并将分析结果发送邮件到指定邮箱. 实现前两 ...
- HDU 5914 Triangle 【构造】 (2016中国大学生程序设计竞赛(长春))
Triangle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Su ...
- Linux学习笔记4——函数调用栈空间的分配与释放
一.函数执行时使用栈空间作为自己的临时栈,3种方式决定编译器清空栈的方式:__stdcall. __fastcall.__cdecl 1.__stdcall表示每个调用者负责清空自己调用的函数的临时栈 ...
- hdu 1081 矩阵最大连续子序列
问题描述:二位平面图,每一个坐标都有值,正值或负值,求任意矩形中和的最大值问题 解决方案:求解图中每一个坐标为起点,求任意长度宽度的矩形的和 #include<iostream> #inc ...