CSS排版程式(4)-顏色與背景

屬性名稱

color(顏色)

background(背景):background-color(背景顏色)、background-image(背景圖片)、background-repeat(重覆排列)、background-attachment(鎖定圖片)、background-position(圖片位置)

background

說明:設定背景的綜合屬性。是background-color、background-image、background-repeat、background-attachment、background-position的集合體。屬性值必須按照順序排列,允許缺少的值。此語法不提供範例結果。

屬性值:(background-color) (background-image) (background-repeat) (background-attachment) (background-position)、inherit(繼承父元素設定)

【範例】

.bg1 { background:#00ff00 url(bg.gif) no-repeat fixed center; }
.bg2 { background:#ff0000 url(bg.gif); }

background-attachment

說明:設定背景圖片是否隨捲軸移動。當捲軸上下移動時,背景圖片是固定在螢幕上的位置,還是會隨著捲軸移出螢幕。此語法不提供範例結果。

屬性值:scroll(隨捲軸移動,預設值)、fixed(固定不動)、inherit(繼承父元素設定)

【範例】

.bg {
    background-image:url(bg.gif);
    background-attachment:fixed;
}

background-color

說明:設定背景顏色。顏色的表示方法可參考「網路色彩的表示法」。

屬性值:(顏色)、transparent(透明,預設值)、inherit(繼承父元素設定)

【範例】

.bg { background-color:yellow; }

【結果】

背景屬性也可設定文字

background-image

說明:設定背景圖片。

屬性值:(網址)、none(無)、inherit(繼承父元素設定)

【範例】

.bg { background-image:url(http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs717.ash1/161978_140842359277505_3667191_n.jpg); }

【結果】

background-position

說明:設定背景圖片的位置,通常是在背景圖片不重覆排列時使用。

屬性值:left top(左上)、left center(靠左置中)、left bottom(左下)、right top(右上)、right center(靠右置中)、right bottom(右下)、center top(靠上置中)、center center(置中)、center bottom(靠下置中)、(x軸位移單位) (y軸位移單位)、inherit(繼承父元素設定)

【範例】

.bg {
    background-image:url(http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs717.ash1/161978_140842359277505_3667191_n.jpg);
    background-repeat:no-repeat;
    background-position:350px 50px;
}

【結果】

background-repeat

說明:設定背景圖片是否重覆排列。

屬性值:repeat(重覆排列至整個畫面,預設值)、repeat-x(在水平軸重覆排列)、repeat-y(在垂直軸重覆排列)、no-repeat(不重覆排列)、inherit(繼承父元素設定)

【範例】

.bg {
    background-image:url(http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs717.ash1/161978_140842359277505_3667191_n.jpg);
    background-repeat:repeat-y;
}

【結果】

color

說明:設定文字顏色。顏色的表示方法可參考「網路色彩的表示法」。

屬性值:(顏色)、inherit(繼承父元素設定)

【範例】

.word { color:green; }

【結果】

和HTML的具有相同的效果。