CSS3 background

background

     .box{
         width: 500px;
         height: 500px;
         border: 10px solid rgba(0,0,0,.5);
         margin: 20px auto;
         background: url("image/img02.jpg") no-repeat;
         padding: 30px;
     }

1）background里设置的图片，默认会把整个div填充满，显得很乱，设置no-repeat让其不重复
2）background的背景图默认会从border内的左上角那个顶点开始（不包含border），即使设置了padding，也是从那个点开始填充（注意图片里的箭头）
这里的background-origin: padding-box;（默认包含padding）

3）当设置background-origin: border-box;时，顶点变成border外开始左上角处的那个点了。（注意图片里的箭头）（包含border）

4）当设置background-origin: content-box;时，顶点就变成从内容区开始的那个点了。（注意图片里的箭头）（不包含padding）

5）background-attachment: fixed;这个属性可以将背景图片固定住，滚动条滚动，背景图片仍静止不动。
6）background-clip，这个东西跟background-origin有点相似，也是有padding-box，border-box，content-box三个值。它就是裁剪的意思。
当你的background顶着头填充时，即background-origin: border-box;（覆盖border）
这个时候，你裁剪一下，你从padding处裁剪，即background-clip: padding-box;
那么，你顶着头那部分背景（压着border处的背景）就没了。假如你从content处开始裁剪，即background-clip: content-box;这时候，你连压着padding处那块背景都没了。效果如下：

            background-origin: border-box;
            background-clip: padding-box;

            background-origin: border-box;
            background-clip: border-box;

7）background-clip，还有一个神奇的属性，text；这个属性配合着transparent能够为文字设背景图
-webkit-这个东西代表这个属性只在webkit内核里才好用，它是一个私有的属性。

	h2 {
            background: url("image/img02.jpg");
            color: transparent;
            -webkit-background-clip: text;
        }

<h2>我的妈呀</h2>

效果如下

8）background-size，这个就比较好用了，图片如果不够div的大小，填充不满，直接来一个background-size: cover;就填充了
这个也可以设置百分比，像素，比如：
background-size: 100px 200px; 设置宽100 高200
background-size: 50% 50%; 宽高都是这个div的一半
background-size: contain;表示当有一个地方拉到头了，就不再拉伸了。

9）加多个背景图，用background-position配合一下就能实现

        .box{
            width: 600px;
            height: 600px;
            border: 10px solid rgba(0,0,0,.5);
            margin: 20px auto;
            background-image: url("image/img02.jpg"),url("image/img01.jpg");
            background-repeat: no-repeat;
            background-position: 0 0,100px 100px;
        }