背景裁剪

CSS Code 复制内容到剪贴板 background-clip:border-box|padding-box|content-box|text  

用于指定background是否包含content之外的border,padding。默认值为border-box，即background从包含border在内的地方开始渲染，IE的默认表现也等同于border-box
背景从border(即包括border在内)开始绘制（渲染）

CSS Code 复制内容到剪贴板 #background-clip-border{     -moz- background - clip : border -box;            /* For Firefox */     -webkit- background - clip : border -box;         /* For Chrome, Safari */     -o- background - clip : border -box;              /* For Opera */     -ms- background - clip : border -box;             /* For IE */      background - clip : border -box;                 /* For Future */    }  

背景从padding(即包括padding在内)开始绘制：

CSS Code 复制内容到剪贴板 #background-clip-padding{     -moz- background - clip : padding -box;            /* For Firefox */     -webkit- background - clip : padding -box;         /* For Chrome, Safari */     -o- background - clip : padding -box;              /* For Opera */     -ms- background - clip : padding -box;             /* For IE */      background - clip : padding -box;                 /* For Future */    }  

背景从content(即内容部分)开始绘制：

CSS Code 复制内容到剪贴板 #background-clip-content{     -moz- background - clip : content -box;            /* For Firefox */     -webkit- background - clip : content -box;         /* For Chrome, Safari */     -o- background - clip : content -box;              /* For Opera */     -ms- background - clip : content -box;             /* For IE */      background - clip : content -box;                 /* For Future */    }  

将背景裁剪作为文本的填充色：

CSS Code 复制内容到剪贴板 /* 如果你的浏览器支持text值，你将会看到本段文字的颜色直接使用了背景颜色：红色，且背景将被裁剪掉不再显示 */   #backgr ound- clip -text{      background-color : #f00 ;     -webkit-text-fill- color : transparent ;     -webkit- background - clip :text;                /* For Chrome, Safari */      background - clip :text;                        /* For Future */    }  


背景图片位置

CSS Code 复制内容到剪贴板 background-origin:border-box|padding-box|content-box  

以border(即包括border)为原点计算背景图的background-position：

CSS Code 复制内容到剪贴板 #background-origin-border{     -moz- background -origin: border -box;          /* For Firefox */     -webkit- background -origin: border -box;       /* For Chrome, Safari */     -o- background -origin: border -box;            /* For Opera */     -ms- background -origin: border -box;           /* For IE */      background -origin: border -box;               /* For Future */    }  

以padding(即包括padding)为原点计算背景图的background-position：

CSS Code 复制内容到剪贴板 #background-origin-padding{     -moz- background -origin: padding -box;          /* For Firefox */     -webkit- background -origin: padding -box;       /* For Chrome, Safari */     -o- background -origin: padding -box;            /* For Opera */     -ms- background -origin: padding -box;           /* For IE */      background -origin: padding -box;               /* For Future */    }  

以content(即从content开始)为原点计算背景图的background-position：

CSS Code 复制内容到剪贴板 #background-origin-content{     -moz- background -origin: content -box;          /* For Firefox */     -webkit- background -origin: content -box;       /* For Chrome, Safari */     -o- background -origin: content -box;            /* For Opera */     -ms- background -origin: content -box;           /* For IE */      background -origin: content -box;               /* For Future */    }  


图片背景尺寸

CSS Code 复制内容到剪贴板 background-size:[length|percentage|auto]{1,2}|cover|contain  

 用于设置背景图片的大小，有2个可选值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定1个值得，则第2个值默认为auto
数值表示方式：

CSS Code 复制内容到剪贴板 #background-size{      background - size : 300px   100px ;    }  

百分比表示方式：

CSS Code 复制内容到剪贴板 #background-size2{      background - size :40% 80%;    }  

等比扩展图片来填满元素，即cover值：

CSS Code 复制内容到剪贴板 #background-size3{      background - size :cover;    }  

等比缩小图片来适应元素的尺寸，即contain值：

CSS Code 复制内容到剪贴板 #background-size4{      background - size :contain;    }  

以图片自身大小来填充元素，即auto值：

CSS Code 复制内容到剪贴板 #background-size5{      background - size : auto ;    }