CSS3之背景 background-size background-origin background-clip

【一】background-size  規定背景圖像的尺寸

1. 以像素規定尺寸　　　　

   div
   {
   background:url(bg_flower.gif);
   -moz-background-size:63px 100px; /* 老版本的 Firefox */
   background-size:63px 100px;
   background-repeat:no-repeat;
   }

2. 以百分比規定尺寸（尺寸相對於父元素的寬度和高度）
   

   div
   {
   background:url(bg_flower.gif);
   -moz-background-size:40% 100%; /* 老版本的 Firefox */
   background-size:40% 100%;
   background-repeat:no-repeat;
   }

    

【二】background-origin  規定背景圖片的定位區域

　　語法： background-origin: padding-box|border-box|content-box;　　

origin的翻譯過來時原始的意思。顧名思義，因此background-origin是用來決定圖片的原始起始位置。

好比content-box時，首先會讓背景圖片的左上角和內容邊緣左上角對齊，padding-box時，則會讓背景圖片的左上角和內邊距的左上角對齊。background-origin的值的確是決定背景圖片開始從哪一個區域開始顯示。

若是沒有設置任何的 background-origin屬性的話，它默認的起始位置在哪呢？——padding。 　　

有一點要十分的注意：若是背景不是no-repeat的話，這個屬性是無效的。它會從border-box區域開始顯示，這一點很重要。

http://www.html-5.cn/div-css/jiaocheng/2417.html

 

 

【三】background-clip  規定背景的繪製區域

　　語法： background-clip: border-box|padding-box|content-box;

clip原意爲裁剪，截取。一樣顧名思義，background-origin的做用爲將背景圖片作適當的裁剪，以適應須要。固然這裏並非真正意義上的把圖片給裁剪了，而是根據屬性值。把圖片的某些部位作適當的隱蔽。

根據你設置的盒子部位，那麼圖片在這個部位的外邊緣之外的部分都會不可見。舉個具體例子，圖片起始位置好比是從border-box開 始，但background-clip設置的值是content-box，那麼只有content區域的內容可見，而在在content以外的圖片內容都被隱蔽掉了。儘管你是讓圖片從邊框開始顯示。

http://www.html-5.cn/div-css/jiaocheng/2417.html

 

background-clip：border-box|padding-box|content-box

該屬性指定了背景在哪些區域能夠顯示，但與背景開始繪製的位置無關，背景的繪製的位置能夠出如今不顯示背景的區域，這時就至關於背景圖片被不顯示背景的區域裁剪了一部分同樣。

 

background-origin：padding-box|border-box|content-box

該屬性指定了背景從哪一個區域(邊框、補白或內容)開始繪製,但也僅僅能控制背景開始繪製的位置，你能夠用這個屬性在邊框上繪製背景，但邊框上的背景顯不顯示出來那就要由background-clip來決定了

摘自 http://www.jb51.net/css/65594.html

 

【四】多重背景圖片 （圖片是重疊的）

background-image:url(bg1.gif),url(bg2.gif);