CSS3背景设置

1.背景尺寸
添加背景图片
background: url(“1.jpg”) no-repeat;
a)控制背景图片大小
具体数值控制background-size:500px 500px ;
b）百分比控制：background-size:100% 50%;
c） Cover会保证完全覆盖盒子，但不能保证完全显示，会超出
background-size:cover;（全屏背景自适应比较好实用）
d）Contain:包含最大化的比例显示在盒子中，不保证铺满盒子
background-size:contain;

2.全背景练习

    html,body{
        height:100%;
    }
    body{
        background: url("1.jpg") no-repeat center;
      /*  background-size: 100% 100%;*/
        background-size: cover;
    }

3. 背景原点
   控制背景从什么地方开始显示
   background-origin: border-box;
   padding-box：默认值
   border-box：从角开始
   content-box：内容区域开始
   

4.背景裁剪
background-clip: content-box;

5.多背景图片（相册制作）

    .box{
        width:400px;
        height:400px;
        border: 1px solid #000000;
        margin: 40px auto;
        background: url("1.jpg") no-repeat left top
       , url("1.jpg") no-repeat right top
    ,url("1.jpg") no-repeat right bottom
    ,url("1.jpg") no-repeat left bottom
    ,url("1.jpg") no-repeat center;
    }

6.多背景制作海报

<meta charset="UTF-8">
<title>Title</title>
<style>
    .box{
        width:640px;
        height:1000px;
        margin: 0 auto;
        border:1px solid #000000;
        background: url("1.jpg") no-repeat left top
    ,url("1.jpg") no-repeat right top
    ,url("1.jpg") no-repeat right bottom
    ,url("1.jpg") no-repeat left bottom #4A00AB;
    }
</style>