在CSS3中,為了滿足更多需求,新增了多個新的背景屬性,它們提供了對背景更強大的控制。
除了上述背景屬性,CSS3還增加了多背景圖片。
在CSS3中,我們可以使用background-size屬性來設置背景圖片的大小。
語法:
background-size:取值;
說明:
background-size取值共有2種,一種是使用長度值(如px、百分比);另外一種是使用關鍵字。
background-size關鍵字取值如下表:
使用background-size屬性可以實現自適應元素大小的背景圖片。
在CSS3中,我們可以使用background-origin屬性來設置元素背景圖片平鋪的最開始位置。
語法:
background-origin:屬性值;
說明:
background-origin屬性取值如下:
background-origin屬性往往都是配合background-position屬性 來使用,其中background-origin屬性規定background-position屬性相對於什麼位置來定位。
在CSS3中,使用background-clip屬性來將背景圖片根據實際需要進行剪切。
語法:
background-clip:屬性值;
說明:
background-clip屬性取值如下表:
background-clip屬性指定了背景在哪些區域可以顯示,但與背景開始繪制的位置(即background-origin屬性)無關。背景繪制的位置可以出現在不顯示背景的區域。這就相當於背景圖片被不顯示背景的區域裁剪了一部分一樣。
background-clip屬性與background-origin屬性取值一樣,但是本質卻不一樣。
在CSS3中,我們可以輕松實現多背景圖片。