background相關屬性

serendipity發表於2015-04-18

background-color: 設定background的顏色[預設繪製區域是border-box]
background-clip(css3): 設定background-color的繪製區域,預設值時border-box,還有padding-box,content-box兩個值,分別包括padding區域,只包括content區域。

以上是和background-color相關的屬性,兩個屬性通常一起使用。

下面是關於background-image屬性:
background-image(css1,css3中提供了可以設定多張image的功能,多張image的時候,在開始設定的那種放置在最前面,ie8之前的瀏覽器不能使用此功能): 設定background的背景圖片。
由於background-image和background-color有很大的區別,因此background-image通常還涉及到以下屬性,來控制background-image。
background-origin: 設定圖片的位置(預設值是padding-box,還有border-box和content-box)。和color一樣,但是區別在於預設值不一樣。如果background-attachment設定為fixed,那麼該屬性將無效。
background-position: 設定圖片的位置(座標級別的),可以通過該屬性設定精準的位置。
background-repeat: 設定圖片的平鋪模式。預設只是repeat(水平垂直方向上進行平鋪),repeat-x表示x方向上平鋪,repeat-y表示y方向上平鋪.no-repeat,表示不進行平鋪。
background-size(css3): 設定圖片的尺寸。
background-attachment: 設定圖片的fixed還是scroll( 預設值)。

相關文章