CSS3背景图像属性

CSS3背景图像属性

目录：

• CSS3背景图像区域
• CSS3背景图像定位
• CSS3背景图像大小
• CSS3多重背景图像
• CSS3背景属性整合

---

1、CSS3背景图像区域

background-clip属性 指定背景绘制区域
语法：
background-clip: border-box | padding-box | content-box
即： 从 边框/内偏移/内容 区域开始绘制图像，超出的部分被裁剪掉了
兼容性：
IE9、FireFox、Chrome、Safari5+、Opera
举栗：

    background: url('img1.png') no-repeat center;
    background-clip: border-box; 

---

2、CSS3背景图像定位

background-origin属性 指定background-position属性应该是相对位置
语法：
backgrounnd-origin: padding-box |border-box | content-box
即： 从 边框/内偏移/内容 开始绘制图像
兼容性：
IE9、FireFox4+、Chrome、Safari5+、Opera
举栗：

    background: url('img1.png') no-repeat 50px 100px;
    background-clip: border-box;
    // 从边框 左偏移50px , 向下偏移100px

---

3、CSS3背景图像大小

background-size属性 指定背景图片的图片大小
语法：
background-size: length |percentage | cover | contain
即： 设置背景图片的平铺方式
兼容性：
IE9、FireFox4+、Chrome、Safari5+、Opera
举栗：

    div {
        width: 800px;
        height: 500px;
        background: url('img1.png') no-repeat;
        background-size: 100%; // 平铺即 100% auto
        background-size: 100% 100%; // 完全铺满容器, 高和宽拉伸
        background-size: 50% 50%; // 背景图的高和宽都是div高和宽的50%
        background-size: 600px; // 即 600px auto
        background-size: 600px 400px; // 按照600*400拉伸
        background-size: cover; // 完整的填充不留白(不拉伸)，多余的部分溢出
        background-size: contain; // 平铺，即将背景图片等比例缩放至某一边紧贴容器边缘为止(不拉伸)
    }   

---

4、CSS3多重背景图像

background-image属性 CSS3允许为元素使用多个背景图像
语法：
background-image: url(img1.jpg) , url(img2.png)
即：同时设置多个背景图像, 前面的图会依次覆盖后面的图(推荐前面放透明的图)
举栗：

    background-image: url('bg1.png'), url('bg2.jpg'); 

5、CSS3背景属性整合

语法：
background:color position size repeat origin clip attachment image
即： color - 背景图片颜色
position- 位置
size - 大小值
repeat - 重复与否
origin - 定位
clip - 区域
attachment - 状态(随页面滚屏或固定不变)
image - url
举栗：

/*background:color position size repeat origin clip attachment image*/
background:#abcdef center 50% no-repeat content-box content-box fixed url('bg1.png');