在css3中，background-clip和background-origin它們2個的功能大致相同，但又有些細微差別。
1.background-clip：規定背景的繪制區域，當背景是純顏色時與圖片時，它的顯示方式又不一樣。它有3種屬性：border-box、padding-box、content-box.
border-box：背景是從邊框開始繪制，但當背景是圖片時，它是左邊和上邊是沒有繪制圖片，但下邊和右邊有；
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 div 7 { 8 width:300px; 9 height:300px; 10 padding:50px; 11 background-color: red; 12 background-image:url('/8.jpg'); 13 background-repeat:no-repeat; 14 /*-webkit-background-origin:content-box;*/ 15 -webkit-background-clip:border-box; 16 /*-webkit-background-clip:padding-box;*/ 17 border:10px dashed #92b901; 18 } 19 </style> 20 </head> 21 <body> 22 23 <div> 24 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 25 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 26 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 27 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 28 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 29 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 30 </div>
這是結果：
padding-box：背景在邊框內部繪制（不包括邊框）；
content-box：背景從內容部分繪制；具體例子看這個地址：http://www.w3school.com.cn/tiy/c.asp?f=css_background-clip
2.background-origin:規定背景圖片的定位區域，它的屬性也有border-box、padding-box、content-box 這3種屬性，但要注意他的描述是“背景圖片”，也就是說它只能對背景做樣式上的操作，它相當於positon,規定了圖片開始繪制的的區域，也就是它只相當於規定圖片的左上角從什么地方開始，其他的它就不負責了；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width:300px; height:300px; padding:50px; background-color: red; background-image:url('/8.jpg'); background-repeat:no-repeat; -webkit-background-origin:content-box; background-size: 380px 380px; border:10px dashed #92b901; } </style> </head> <body> <div> 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 </div> </body> </html>
下面是結果：
background-origin:繪制圖片時，是可以從邊框開始的，但有可能會被邊框覆蓋掉一些內容，如上面的第二幅圖片