background详解

–前言
–background属性(css2.0)

 - background-color： 设置背景颜色
 - background-image : url() 设置背景图像
 - background-repeat : 设置重复方式 取值 repeat-x | repeat-y | repeat | no-repeat;
 - background-attachment : 设置背景图片的固定方式 取值 fixed | scrol
 - background-position : 设置背景的左上角位置,坐标可以是以百分比或固定单位 。取值 X轴坐标,Y轴坐标[top,bottom,center,left,right,10px,20%];

 - background 属性的简写形式：(background 各个值的顺序依次) 
background-color | background-image | background-repeat | background-attachment | background-position

1.background-color： 设置背景颜色，接受任何合法的颜色值。

    background-color: #ccc;
    background-color: red;
    background-color: rgba(0,0,0);
    background-color: transparent; //把背景色设置为透明,默认情况下只要不设置背景颜色（或者背景图片），背景就是透明的

2.background-image : url() 设置背景图像；默认值是 none，表示背景上没有放置任何图像。

  注意：
      当图片不足以平铺整个元素背景，空出的部分将显示background-color设置的颜色。

background-image: url('1.jpg');
background-image: none; //默认为none

3.background：设置重复方式 取值 repeat-x | repeat-y | repeat | no-repeat | inherit
4.background-position：设置背景图片在元素中的位置
–取值：坐标可以是以百分比或固定单位 。取值 X轴坐标,Y轴坐标[top,bottom,center,left,right,10px,20%];
- 4.1取数值

<div class="box"></div>
}
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            background-image: url(2.png);
            background-repeat: no-repeat;
            background-position: 0 0;
        }

background-position: 100px 0;

background-position: -30px 0;

• 4.2取方向值
  -水平方向： left , center ,right
  -垂直方向：top ，center ,bottom

background-position: left top;

background-position: center top;

background-position: right bottom;

• 4.3百分比

background-position: 10% 40%;

background-position: 100% 40%;

5.background-attachment : 设置滚动页面时，背景图怎么变化。 取值 fixed | scroll | inherit.如果设值为fixed当向下滚动页面时，内容向下滚动，而背景不滚动（也可以说相当于内容向上移动）（背景图片只能在其元素内移动）。设值为scroll,背景就会跟着滚动。

<div class="box"></div>
<style>
        .box {
            width: 400px;
            height: 1400px;
            border: 1px solid #ccc;
            background-image: url(2.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-attachment: scroll;
        }
    </style>

.box {
            width: 400px;
            height: 1400px;
            border: 1px solid #ccc;
            background-image: url(2.png);
            background-repeat: no-repeat;
            background-position: left bottom;
            background-attachment: fixed;
        }

• background CSS3增加的属性

1.background-clip（在哪里显示背景图片）: border-box|padding-box|content-box|no-clip

background-clip: border-box;
background 在 border内显示，和现在的方式一样。.
background-clip: padding-box;
backgrounds 在padding内显示,而非border，跟IE6的处理方式相同。
background-clip: content-box;
backgrounds 只显示在内容内,而非border 或 padding。
background-clip: no-clip;
默认值，和border-box一样

2.background-origin（和background-position属性一起使用。改变background-position 的计算方式）: border-box | padding-box | content-box

ackground-origin: border-box;
background-position从border开始计算。
background-origin: padding-box;
background-position从padding开始计算。
background-origin: content-box;
background-position从内容开始计算。

3.background-size（定义背景图片大小）: contain | cover | px | 百分比

background-size: contain;
缩小图片以符合元素大小。
background-size: cover;
扩展图片以符合元素大小。
background-size: 50px 140px;
重定义大小。
background-size: 30% 80%;
用百分比重定义。