关于盒子背景图片布局
一、盒子的背景图片（css3）
1、一张背景图片
background: url("img/01.jpg")0 0 no-repeat；（图片地址，图片的位置x,y,坐标，是否重复）
2、多张背景图片
background: url("img/01.jpg")0 0 no-repeat,
url("img/02.jpg")0 208px no-repeat,
url("img/03.jpg")0 416px no-repeat；
图片重复：background-repeat:
repeat-x 背景图片横向重复
repeat-y 背景图片竖向重复
no-repeat 背景图片不重复
设置背景图片的起始原点：background-origin
background-origin:border-box;------背景图片从边框开始显示
background-origin:padding-bax;-----背景图片从内边距开始显示（默认）
background-orign:content-box;------背景图片从内容区域开始显示
图片的尺寸：background-size
background-size:100px 100px;(宽、高)
二、让背景图片不随浏览器的缩小而缩小，让其固定在原来的位置
1、给外层装背景图片的盒子设置固定的宽度，背景图片的宽度可以设置为100%，这时图片不会随着浏览器的缩小而变小，图片不会变得挤在一起很模糊；
2、如果想要根据不同的显示器，在不同的分辨率的屏幕上来显示宽度为100%的背景图片，这时候就要用到css3的媒体查询方法
媒体查询的定义和使用（具体的用法可以看css3的媒体查询http://www.runoob.com/cssref/css3-pr-mediaquery.html）
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
（max-width:最大宽度；min-width:最小宽度）
例如：当文档小于300像素就修改他的样式
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
- @media only screen and (min-width: 480px) and (max-width: 767px){
- .div1{
- width: 420px;position: relative;
- }
- }