選單 Menu
計數器 Counter
TODAY : 307307307
YESTERDAY : 356356356
TOTAL : 1314555131455513145551314555131455513145551314555
網頁知識 : 網頁設計:CSS 背景屬性background
作者 設計師 於 2012年01月30日 09:38:51 (13510 次閱讀)

CSS 背景屬性background

背景色background-color : transparent | color

瀏覽器預設背景為透明(transparent),設置背景顏色可使用常見的:顏色名稱、RGB顏色表示、RGB顏色百分比表示;16進制表示。

background-color : transparent; /*背景色為透明*/
background-color : black; /*背景色為黑色,顏色名稱*/
background-color: rgb(0,0,0); /*背景色為黑色,RGB顏色表示*/
background-color: rgb(0%,0%,0%);/*背景色為黑色,RGB顏色百分比表示*/
background-color : #000000; /*背景色為黑色,16進制表示*/

背景圖片background-image : none | url ( url )

瀏覽器預設為無圖片背景, url寫入圖片所在位置。

background-image : url(images/bg.gif);

背景圖片重複出現background-repeat : repeat | no-repeat | repeat-x | repeat-y

預設為repeat,即背景圖沿橫向與縱向重複出現。

background-repeat : no-repeat; /*背景圖不重複*/
background-repeat : repeat-x; /*背景圖橫向重複*/
background-repeat : repeat-y; /*背景圖縱向重複*/

預設:repeat no-repeat
repeat-x repeat-y

背景圖片是否隨內容捲動
background-attachment : scroll | fixed


預設為scroll,背景圖會隨著網頁內容捲動。

background-attachment : scroll; /*背景圖隨內容捲動*/
background-attachment : fixed; /*背景圖固定不動*/

背景圖片位置background-position

主要是用來定位背景圖的位置,可以使用top | center | bottom | left | center | right,或是百分比、數值來設定背景圖位置。

background-position : 0 0 ;
background-position : 0% 0% ;
background-position : left top ;
/*以上3種語法都是使背景圖定位在左上角的方法*/

背景圖background綜合寫法

background:#FFFFFF url(images/bg.gif) no-repeat scroll left top;

以上語法代表,網頁背景色是白色,背景圖片為bg.gif,背景圖片不重複,背景圖片隨內容捲動,背景圖靠左靠上。

延伸閱讀