1.HTML5 background背景相关笔记，还未整理，可以先看一下，按照自己的理解知识点基本都覆盖到了。
<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<meta charset="utf-8">
<meta name="Author" content="Helen">
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
div {
/*如果图片大于容器，那么默认就从容器左上角开始放置
如果图片小于容器，那么图片默认会平铺
background-repeat
repeat 默认值，图像在水平方向和垂直方向都重复以填满容器
repeat-x 图像只在水平方向重复以填满容器
repeat-y 图像只在垂直方向重复以填满容器
space 在不缩放的前提下尽可能多的重复图片
round 尽可能多的重复图片，会拉伸图片，使其填满整个背景(优点是不会有残缺)
no-repeat 不重复，图像只显示一次
background-attachment:
*/
/*overflow: scroll;*/
/*width: 430px;*/
/*height: 430px;*/
/*background: url(images/share1.png) local;*/
background背景连写: background-color background-image background-repeat background-attachment background-position / background-size background-origin background-chip;
注意：background-position / background-size连写顺序有要求，而且必须加/
background: url(images/bg-img.jpg) no-repeat scroll top left /contain content-box content-box;
/*01:*/
/*background-color: #fff;*/
/*red;*/
/*rgb(255,255,255);*/
/*rgba(255,255,255, .1);*/
/*02*/
/*background-image: url(images/01.jpg);*/
/*03*/
/*background-repeat:repeat;*/
/*repeat 默认值，图像在水平方向和垂直方向都重复以填满容器*/
/*repeat-x 图像只在水平方向重复以填满容器*/
/*repeat-y 图像只在垂直方向重复以填满容器*/
/*space 在不缩放的前提下尽可能多的重复图片*/
/*round 尽可能多的重复图片，会拉伸图片，使其填满整个背景*/
/*no-repeat 不重复，图像只显示一次*/
/*04
background-attachment:
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，但因为页面移动时，背景图所在的盒子也会移动，所以背景图会被覆盖掉
当某个元素使用overflow:scroll出现滚动条时，这是scroll无法相对于元素固定，所以他无法移动，这时要用local
local：背景图相对于元素内容固定，*/
/*05*/
/*background-position: 设置背景图的起始位置，默认 0% 0%，如果只规定一个值，那么另一个值是center或50%
left top 用方位名词
0% 0% 代表从左上角开始
100% 100% 代表右下角开始
10px 20px 参照background-origin规定的位置作为参照点
06：background-size: 规定背景图像的大小
20px 30px 建议只写一个，另一个会auto
80% 80% 参照父容器可放置背景图的百分比
cover :背景区域被图片填满，图片为等比例播放(图片可能显示不全)
contain: 图片完全展示(盒子可能会留空白)
07 background-origin 规定背景图根据盒子哪个部分来定位的，当背景为scroll时，background-origin针对盒子有三种参照方式，而background-position就是根据这三种方式的定位点来移动图片，
当背景为fixed时，background-origin不起作用，background-position是根据视口定位的，因为scroll是相对于当前父盒子固定，而fix的是相对于视口固定，所以background-position的位置参照对象就会不同
background-origin: border-box; 图片从盒子边框开始，会覆盖边框
background-origin: padding-box; 图片从盒子内边距开始，会覆盖内边距
background-origin: content-box; 图片从盒子内容开始，会覆盖内边距
08 background-chip 设置内容的裁切，其实设定这个盒子显示哪部分的内容
border-box:其实是显示border及以内的背景
padding-box:其实是显示padding及以内的背景
content-box:其实是显示content及以内的背景
*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>