1. 程式人生 > >CSS3 background-image

CSS3 background-image

1,background-image

可以新增多個圖片,不同的背景影象之間用逗號分隔開,其中顯示在最頂層的是第一張圖片

對應的附加屬性,比如說background-size,background-repeat按照順序對應不同的背景影象,值用逗號隔開

2,background-size

指定了背景影象的大小,CSS3以前背景影象的大小由背景影象的實際大小決定,

background-size可以填畫素或者百分比,指定的大小是相對父元素的寬度和高度的百分比大小

3,background-origin

指定了背景影象的位置區域

可填值:border-box | padding-box | content-box

(注:其實將元素的content的height設定為0px,然後再加一個padding,背景圖片就會跑到padding-box裡面)

4,background-clip

指定了背景影象開始繪製的位置

可填值:border-box(預設值) | padding-box | content-box

border-box說明從border開始就繪製背景影象

padding-box說明從padding開始就繪製背景影象

content-box說明只有content區域有背景影象