CSS3多个背景图片和之前背景的笔记

在CSS3 中可以设置多个背景图片
类似于下面这种
background-image: url("images/bg3.png"),url("images/bg2.png"),url("images/bg1.jpg");
中间使用","隔开

我想使用背景的其他属性怎么给..每一个背景设置相关样式呢....
同样使用","隔开
background-repeat: no-repeat;
background-size: 500px,250px,100%;/*写三个值,中间使用","隔开,就是设置三个背景的样式了*/
background-position:600px 20px,50px 300px,top left;


测试代码(确实是可以同时写多个的)
<style>
        div{
            width: 100%;
            height: 700px;
            /*注意叠放顺序,可以单独写,也可以合并写*/
            background: url("images/bg2.png") no-repeat 0px 200px,url("images/bg3.png") no-repeat 800px 150px,url("images/bg1.jpg") no-repeat 0px 0px ;
        }
    </style>
<div></div>



设置内边距,测试背景填充范围和参考对象(感觉基本不会用)
    padding: 50px;
    background-clip: content-box;
    background-origin: content-box;

相关笔记
背景相关
背景
1.背景色 background-color:颜色值，transparent
会填充内容，内边距，边框。。。
2.背景图像
background-image:
取值：url(路径)，
4.背景重复！important
background-repeat:
取值：
repeat :垂直，水平，双方向重复；
repeat-x;
repeat-y:
no-repeat:不重复；
5.背景图尺寸，尽量少改
background-size:
取值：
value1 value:背景图宽，高。
value%  value%:百分比；
cover:覆盖，图像上，左，下，与边框重合就行。也属于缩放。
contain:包含。必须全包含，以框为限制。属于缩放。
6.背景图像固定
background-attachment:
取值：
scroll:默认：
fixed：固定；
7.背景定位!important
background-position:
取值：
x y;用空格区分。x,y的偏移位置。可以是负值（超出部分不显示）。
x% y%：相对量。
left|right|center|top|bottom  自由组合。




7.背景裁减
background-clip:
取值：
border-box:包含边框
padding-box：
content-box:
8.背景的定位区域(图还是完整的图)
background-origin
取值：
border-box:包含边框
padding-box：
content-box:
9.背景综合属性：
background:color url() repeat attachment position;
常用用法:第二种最多
background:#eeff00;
background:url() no-repeat 222px 333px;


背景属性到此结束
----------------------------------------------------------------