CSS3背景图像属性

缺乏、安全感 2022-05-14 08:54 363阅读 0赞

# 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');