文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列
块元素占一行，行内元素在一行之内从左到右排列
先写的先排列，后写的排在后面，每个盒子都占据自己的位置
文档流指的是文档中可现实的对象在排列时所占用的位置
将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流
也就是说在文档流中元素默认会紧贴到上一个元素的右边
如果右边不足以放下元素，元素则会另起一行，在新的一行中继 续从左至右摆放
这样一来每一个块元素都会另起一行，那么我们如果想在文档
流中进行布局就会变得比较麻烦
浮动
所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来
浮动使用float属性
可选值：none：不浮动；left：向左浮动；right：向右浮动
块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素
当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度
当一个元素浮动以后，其下方的元素会上移，元素中的内容将会围绕在元素的周围
浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置
元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素
元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度，也就是浮动元素不会撑开父元素
浮动元素默认会变为块元素，即使设置display:inline以后其依然是个块元素
浮动特性
浮动元素有左浮动(float:left)和右浮动(float:right)两种
浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
相邻浮动的块元素可以并在一行，超出父级宽度就换行
浮动让行内元素或块元素自动转化为行内块元素
浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
父元素内整体浮动的元素无法撑开父元素，需要清除浮动
浮动元素之间没有垂直margin的合并
清除浮动
clear属性可以用于清除元素周围的浮动对元素的影响。
也就是元素不会因为上方出现了浮动元素而改变位置。
可选值：
left：忽略左侧浮动
right：忽略右侧浮动
both：忽略全部浮动
none：不忽略浮动，默认值
方法：
1.父级上增加属性overflow：hidden
2.在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
3.使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动的使用方法：
.con2{... overflow:hidden}
或者
<div class="con2 clearfix">
定位
position属性可以控制Web浏览器如何以 及在何处显示特定的元素
可以使用position属性把一个元素放置到网页中的任何位置
可选值：
static：默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
relative：生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute： 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方
相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位
如果找不到，则相对于body元素进行定位。
fixed ：生成固定定位元素，元素脱离文档流，不占据文档流的位置
可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
inherit ：从父元素继承 position 属性的值
相对定位
每个元素在页面的文档流中都有一个自然位置
相对于这个位置对元素进行移动就称为相对定位
周围的元素完全不受此影响
当将position属性设置为relative时，则开启了元素的相对定位
当开启了相对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位
相对定位的特点
如果不设置元素的偏移量，元素位置不会发生改变
相对定位不会使元素脱离文本流元素
在文本流中的位置不会改变
相对定位不会改变元素原来的特性
相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素
绝对定位
绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位
当将position属性设置为absolute时，则开启了元素的绝对定位
当开启了绝对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位
绝对定位的特点
绝对定位会使元素完全脱离文本流
绝对定位的块元素的宽度会被其内容撑开
绝对定位会使行内元素变成块元素
一般使用绝对定位时会同时为其父元素指定一个相对定位
以确保元素可以相对于父元素进行定位
固定定位
固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动
当将position属性设置为fixed时，则开启了元素的 固定定位
当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位
固定定位的其他特性和绝对定位类似
z-index
当元素开启定位以后就可以设置z-index这个属性
这个属性可以提升定位元素所在的层级
z-index可以指定一个整数作为参数
值越大元素显示的优先级越高
也就是z-index值较大的元素会显示在网页的最上层
background-color
background-color属性用来为元素设置背景颜色
需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个 颜色作为背景色
如果不设置背景颜色，元素默认背景颜色 为透明，实际上会显示父元素的背景颜色
background-image
background-image可以为元素指定背景图片
和background-color类似，这不过这里使用的是一个图片作为背景
需要一个url地址作为参数，url地址需要指向一个外部图片的路径
例如：
background-image: url(1.jpg)
background-repeat
background-repeat用于控制背景图片的重复方式
如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改
可选值：
repeat：默认值，图片左右上下平铺
no-repeat：只显示图片一次，不会平铺
repeat-x：沿x轴水平平铺一张图片
repeat-y：沿y轴水平平铺一张图片
background-position
background-position用来精确控制背景 图片在元素中的位置
可以通过三种方式来确定图片在水平方向 和垂直方向的起点
关键字：top right bottom left center
百分比
数值
background-attachment
background-attachment用来设置背景图 片是否随页面滚动
可选值：
scroll：随页面滚动
fixed：不随页面滚动
background
background是背景的简写属性，通过这个 属性可以一次性设置多个样式，而且样式 的顺序没有要求
例如：
background: green url(1.jpg) no-repeatcenter centerfixed;
CSS Sprite
CSS Sprites是一种网页图片应用处理方式
通过这种方式我们可以将网页中的零星图 片集中放到一张大图上
这样一来，一次请求便可以同时加载多张图片，大大提高了图片的加载效率
常用图片格式
图片是网页制作中很重要的素材
图片有不同的格式，每种格式都有自己的特性
了解这些特效，可以方便我们在制作网页时选取适合的图片格式，图片格式及特性如下：
1、psd
psd是photoshop的专用格式
UI设计师使用photoshop设计效果图，最后会将psd格式的效果图交付给前端工程师
这种格式是不压缩的，而且保留了图层、透明和半透明等图片信息
所以这种图片格式的容量相对来说是很大的
前端工程师使用这种格式的效果图来切图制作网页
但是网页中不会使用这个格式的图片，它的作用一是保存图片的原始数据，二是方便图片的修改
2、jpg
jpg是一种有损压缩格式，压缩效率高，容量相对来说最小，网络传输速度快
它不能存为透明背景，在网页中应用最广，一般在不需要透明背景的时候就使用这种图片
3、gif
gif是一种无损压缩格式的图片，最多只有256种颜色，颜色丰富的图片转化为这种格式会颜色失真
它的背景可以是透明的，但不能是半透明的，透明背景中的图像
如果边缘轮廓是曲线的，会产生锯齿，它还可以保存为动画格式
4、png
png的目的是为了代替gif图片
无损压缩，背景可以是透明或者半透明的
透明图像边缘光滑，没有锯齿，网页中需要透明或者半透明背景的图片，首选是png图片
png也是firework的专用格式，也可以包含图层信息
firework是另外一款可以和photoshop相比的图像处理软件
也有少量的UI设计师使用这种软件来设计网页效果图
他们设计的效果图就是带图层的png格式的，碰到这种设计师
如果我们习惯了photoshop切图，可以将带图层的png效果图转化成psd图片再处理
5、webp
它是由谷歌于2010年推出的新一代图片格式
在压缩方面比当前jpg格式更优越，在质量相同的情况下
WebP格式图像的体积要比jpg格式图像小40%，不过这种图片还没有得到广泛的浏览器支持
仅在Chrome和Opera上支持，在其他浏览器上需要安装插件才可以显示，目前还没有大规模使用
位图和矢量图
位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的
位图在放大时，图像会失真
上面讲的5种图像都属于位图
矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的
当放大图像时，实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大
而且不会出现像素块，图像边缘也不会出现锯齿
svg
svg是一种矢量二维图形格式，它是基于xml标记语言描述的，可以通过任何文本编辑器创建
它的优点是文件容量小，放大不失真，而且背景也可以是透明的
目前大量使用这种格式来制作网页图标或者网页地图
由于它是矢量的，所以在不同终端屏幕上(pc、手机)都有很好的显示效果
flash
flash是一种矢量动画文件格式，曾经在网络上风靡一时，如今已逐渐退出历史舞台
原因是它的技术更新跟不上发展，这种格式既可以是静态的图形，还可以是多媒体动画
还可以加入用户交互和数据，这是它曾经很流行的原因
这种格式名为swf，flash是对它的统称
这种格式在网页中已经很少使用了，它的很多优秀特性，可以用HTML5取代
swf文件中衍生出一种视频格式flv，它是一种流媒体视频格式
由于它有文件容量小，可以边下载，边观看等优点，目前广泛应用在视频网站中
总结
网页制作中，如果要使用不透明背景的图片，就使用jpg图片
如果要使用透明或者半透明背景的图片，就使用png图片
制作网页图标时候，如果图标含多种颜色，可以使用gif或png图片
如果图标是单色，而且要求有很好的显示效果，可以使用svg；如果是动画图标，可以使用gif
photoshop常用图片处理技巧
photoshop是一款优秀的图像处理软件，作为前端开发工程师，掌握它的一些常用功能是必须的
photoshop的常用功能有：选择、裁剪图像、修图、取色、插入文字等等
除了这些常用功能，前端还需要掌握制作新图像、切图等技巧
本次讲解的photoshop版本为cs6
图片格式转换与压缩
文件/存储为（不推荐）选择图片类型以及压缩比
文件/存储为web所用格式（推荐） 选择图片类型以及压缩比
图像放缩，平移
使用放缩工具， 图像放大缩小，在图像上点击放大，按住alt键点击缩小
快捷键Ctrl+“+”放大 Ctrl+“-”缩小，双击此工具可以让图像按照原始大小显示
使用平移工具， 对图像进行移动，在使用其他工具时，按住空格键盘的空格键
可以切换到此工具，移动完后松开空格键回到原来的工具
双击此工具可以让图像放缩到显示区域完全显示
新建图像
执行菜单命令 文件/新建 可以新建一张图片，设置大小，颜色模式选RGB
网页图片一般选择72像素/英寸，如果图像要打印，可设为300/英寸
背景按情况选透明或白色
移动选择与图层面板
1、按住Ctrl，在图像上点击可以选中图层
2、选择此工具，勾选工具属性栏上的“自动选择图层”，可以在图像上点击选中图层
3、移动元素同时按住Alt键可复制一个图层
4、图层面板的操作，包括图层的显示隐藏、图层顺序、新建图层、图层删除
针对图像中选中图层的操作
1、移动
2、自由变换 执行菜单命令 编辑/自由变换
3、拖拽到另一张图像上完成图层拷贝
历史记录面板
记录20部操作，可以点击已经记录的操作步骤回到之前
选择工具
1、矩形选择工具
2、椭圆选择工具 按住alt+shift键可以从中心拉出正圆
3、任意套索工具 用手任意画出选区，不精确，不常用
4、多边形套索 可以选择多边形物体，对于结构复杂的物体，可以点多个小段来选择。
5、磁性套索 可以自动在物体边缘生成选择线，但是由于太自动了，所以不够精确，也不常用。
6、魔术棒选择工具 按照点击的点的颜色范围来选择
可以设置范围的容差，容差越大，选择区域越大
对于有单色背景的图像中的元素，可以用它点选背景，然后反选，从而选中元素
7、快速选择工具 直接在要选的元素上画，按照画的颜色范围进行选择
8、对图层创建选区：按住Ctrl，用鼠标点击对应的图层，在图层外框生成选区
选区的编辑技巧
1、新选区模式下移动选区
2、选区的加、减、乘，工具属性栏上设置
3、调整边缘 工具属性栏或者执行菜单命令 选择/调整边缘
4、变换选区 执行菜单命令 选择/变换选区，可对选区进行缩放、移动等
5、反选 执行菜单命令 选择/反向
6、取消选择 执行菜单命令 选择/取消选择，快捷键ctrl+d
选区特别注意
选区（蚂蚁线）只对当前图层器起作用，选区操作失败一般是当前图层弄错了
裁剪图像
1、裁切工具
2、对选区执行菜单命令 图像/裁剪
3、设置矩形框大小，创建固定宽高的矩形框，可进行固定尺寸裁剪
针对确定选区的操作技巧
1、复制 执行菜单命令 编辑/拷贝 快捷键ctrl+c
2、粘贴 执行菜单命令 编辑/粘贴 快捷键ctrl+v
2、粘贴入 执行菜单命令 编辑/选择性粘贴/贴入
3、填充 执行菜单命令 编辑/填充
4、描边 执行菜单命令 编辑/描边
5、删除 执行菜单命令 编辑/清除 快捷键 delete
6、自由变换 执行菜单命令 编辑/自由变换 快捷键 ctrl+t
擦除与修复工具
1、擦除工具
2、污点修复工具
参考线技巧
1、视图/标尺，显示标尺，在标尺上按住鼠标拖动可以拉出参考线
2、视图/对齐到/参考线 让参考线移动时自动对齐到选框或者图像的边缘
3、视图/新建参考线 可以精确创建参考线
文本输入
1、执行菜单命令 编辑/首选项/单位和标尺 设置文字的单位
2、文本输入
3、文本编辑 属性工具栏上点击文本编辑按钮
取色
1、取色工具，点击前景色按钮，弹出取色对话框，当前工具切换成取色工具
2、点击前景色按钮，当前工具自动切换到取色工具
图像大小与画布大小
1、图像/图像大小 查看和设置图像的整体大小
2、图像/画布大小 查看和设置图像的画板大小
尺寸测量
1、切片工具 双击切片弹出切片对话框
2、切片选择工具
3、矩形框工具，打开信息面板
photoshop批量切图技巧
切图，就是从效果图中把网页制作需要的小图片裁剪出来。
1、使用psd格式并且带有图层的图像切图
2、在图像上用切片工具切出需要的小图
3、双击切片，给切片命名
4、执行菜单命令 存储为web所用格式
5、点选切片，设置切片的图片格式
6、存储切片，选择“所有用户切片”，点存储(多个切片会存到所选文件夹中的images文件夹中)
Photoshop制作雪碧图技巧
雪碧图，就是将网页制作中使用的多个小图片合并成一个图片
使用css技术将这张合成的图片应用在网页不同的地方
雪碧图可以减少网页加载时的http请求数，优化网页性能
步骤：
使用Photoshop新建一张背景透明的图片
将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小调整大小
按照所有小图片的范围裁剪图片，存为透明背景的png图片
导航条和导航栏
拥有易用的导航条对于任何网站都很重要。
通过 CSS，您能够把乏味的 HTML 菜单转换为漂亮的导航栏。
导航栏 = 链接列表
导航栏需要标准的 HTML 作为基础。
在我们的例子中，将用标准的 HTML 列表来构建导航栏。
导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的：
实例
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
现在，让我们从列表中去掉圆点和外边距：
实例
ul
{
list-style-type:none;
margin:0;
padding:0;
}
list-style-type:none - 删除圆点
导航栏不需要列表项标记
把外边距和内边距设置为 0 可以去除浏览器的默认设定
以上例子中的代码是用在垂直、水平导航栏中的标准代码
垂直导航栏
如需构建垂直导航栏，我们只需要定义 <a> 元素的样式，除了上面的代码之外：
实例
a
{
display:block;
width:60px;
}
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度
width:60px - 块元素默认占用全部可用宽度。我们需要规定 60 像素的宽度
注释：请始终规定垂直导航栏中 元素的宽度。如果省略宽度，IE6 会产生意想不到的结果。
水平导航栏
有两种创建水平导航栏的方法。使用行内或浮动列表项
两种方法都不错，但是如果您希望链接拥有相同的尺寸，就必须使用浮动方法
行内列表项
除了上面的“标准”代码，构建水平导航栏的方法之一是将 <li> 元素规定为行内元素：
实例
li
{
display:inline;
}
display:inline; - 默认地，<li> 元素是块元素。在这里，我们去除了每个列表项前后的换行
以便让它们在一行中显示
对列表项进行浮动
在上面的例子中，链接的宽度是不同的
为了让所有链接拥有相等的宽度，浮动 <li> 元素并规定 <a> 元素的宽度：
实例
li
{
float:left;
}
a
{
display:block;
width:60px;
}
float:left
使用 float 来把块元素滑向彼此
display:block
把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度
width:60px
由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻
我们需要规定 60 像素的宽度
元素的层级
如果定位元素的层级一样，则下边的元素会覆盖上边的元素（上下只文档中的位置）
当元素开启定位以后就可以设置z-index这个属性
这个属性可以提升定位元素所在的层级
z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index
值较大的元素会显示在网页的最上层
没有开启定位的元素，不能使用z-index
父元素的层级再高也不会盖住子元素
CSS 图像透明度
创建透明图像
通过 CSS 创建透明图像是很容易的
注释：CSS opacity 属性是 W3C CSS 推荐标准的一部分
定义透明效果的 CSS3 属性是opacity
/* 针对 IE8 以及更早的版本 */
img{opacity:0.4;filter:alpha(opacity=40);}
IE9, Firefox, Chrome, Opera 和 Safari 使用属性opacity来设定透明度
opacity 属性能够设置的值从 0.0 到 1.0
值越小，越透明
IE8 以及更早的版本使用滤镜filter:alpha(opacity=x)
x 能够取的值从 0 到 100。值越小，越透明
图像透明度Hover 效果
/* 针对 IE8 以及更早的版本 */
img{opacity:0.4;filter:alpha(opacity=40);}
/* 针对 IE8 以及更早的版本 */
img:hover{opacity:1.0;filter:alpha(opacity=100);}
第一个 CSS 代码块类似实例 1 中的代码
此外，我们已经设置了当鼠标指针位于图像上时的样式
在这个例子中，当指针移动到图像上时，我们希望图像是不透明的
对应的 CSS 是：opacity=1
IE8 以及更早的浏览器：filter:alpha(opacity=100)
当鼠标指针移出图像后，图像会再次透明
透明框中的文本
<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
width: 400px;
height: 266px;
background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
border: 1px solid black;
}
div.transbox
{
width: 338px;
height: 204px;
margin:30px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */filter:alpha(opacity=60);
/* CSS3 standard */opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
div.background{
width: 400px;
height: 266px;
background: url('/i/tulip_peach_blossom_w.jpg') no-repeat; border:
1px solid black;
}
div.transbox{
width: 338px;
height: 204px;
margin:30px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */filter:alpha(opacity=60);
/* CSS3 standard */opacity:0.6;
}
div.transbox p{ margin: 0 auto;}
首先，我们创建一个 div 元素 (class="background")
它有固定的高度和宽度、背景图像，以及边框
然后我们在第一个div内创建稍小的 div (class="transbox")
"transbox" div 有固定的宽度、背景色和边框 - 并且它是透明的
在透明div 内部，我们在 p 元素中加入了一些文本
CSS 背景
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
CSS 在这方面的能力远远在 HTML 之上
背景色
可以使用background-color 属性为元素设置背景色
这个属性接受任何合法的颜色值
这条规则把元素的背景设置为灰色：
p {background-color: gray;}
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
p {background-color: gray; padding: 20px;}
可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素
background-color 不能继承，其默认值是 transparent
transparent 有“透明”之意
也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见
背景图像
要把图像放入背景，需要使用background-image 属性
background-image 属性的默认值是 none，表示背景上没有放置任何图像
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
大多数背景都应用到 body 元素，不过并不仅限于此
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio {background-image: url(/i/eg_bg_07.gif);}
理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像
不过并不是所有用户代理都能很好地处理这种情况
另外还要补充一点，background-image 也不能继承
事实上，所有背景属性都不能继承
背景重复
如果需要在页面上对背景图像进行平铺，可以使用background-repeat 属性
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺
默认地，背景图像将从一个元素的左上角开始
请看下面的例子：
body { background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}
背景定位
可以利用background-position 属性改变图像在背景中的位置
下面的例子在 body 元素中将一个背景图像居中放置：
body { background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;background-position:center;}
为 background-position 属性提供值有很多方法
首先，可以使用一些关键字：top、bottom、left、right 和center
通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值
如 100px 或5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异
关键字
图像放置关键字最容易理解，其作用如其名称所表明的
例如，top right 使图像放置在元素内边距区的右上角
根据规范，位置关键字可以按任何顺序出现
只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向
如果只出现一个关键字，则认为另一个关键字是 center
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：
p { background-image:url('bgimg.gif'); background-repeat:no-repeat;background-position:top;}
百分数值
百分数值的表现方式更为复杂
假设你希望用百分数值将图像在其元素中居中，这很容易：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;background-position:50% 50%;
}
这会导致图像适当放置，其中心与其元素的中心对齐
换句话说，百分数值同时应用于元素和图像
也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角
如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角
因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：
body {background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;background-position:66% 33%;}
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%
这一点与关键字类似
background-position 的默认值是 0% 0%，在功能上相当于 top left
这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值
长度值
长度值解释的是元素内边距区左上角的偏移
偏移点是图像的左上角
比如，如果设置值为 50px 100px
图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
body{background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;background-position:50px 100px;}
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角
也就是说，图像的左上角与 background-position 声明中的指定的点对齐
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动
当文档滚动到超过图像的位置时，图像就会消失
您可以通过background-attachment 属性防止这种滚动
通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body{background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat;background-attachment:fixed}
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动
CSS 背景属性
background简写属性，作用是将背景属性设置在一个声明中
background-attachment，背景图像是否固定或者随着页面的其余部分滚动
background-color，设置元素的背景颜色
background-image，把图像设置为背景
background-position，设置背景图像的起始位置
background-repeat，设置背景图像是否及如何重复
css解决图片闪烁
做完功能以后，发现在第一次切换图片时
会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验
为了解决该问题，可以将三个图片整合为一张图片
这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
优点：
1 将多个图片整合为一张图片(雪碧图）里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
