CSS 屬性定義背景效果：【也是簡寫的屬性順序】 * background-color * background-image * background-repeat * background-attachment * background-position ## 背景顏色 body {background-color:#b0c4de;} CSS中，顏色值通常以以下方式定義: * 十六進制 - 如："#ff0000" * RGB - 如："rgb(255,0,0)" * 顏色名稱 - 如："red" ## 背景圖像 默認情況下，背景圖像進行平鋪重復顯示，以覆蓋整個元素實體. body {background-image:url('paper.gif');} ## 背景圖像 - 水平或垂直平鋪 | 值 | 說明 | | :-- | :-- | | repeat | 背景圖像將向垂直和水平方向重復。這是默認 | | repeat-x | 只有水平位置會重復背景圖像 | | repeat-y | 只有垂直位置會重復背景圖像 | | no-repeat | background-image不會重復 | | inherit | 指定background-repea屬性設置應該從父元素繼承 | ## 背景圖像位置 background-position 屬性改變圖像在背景中的位置 | 單一關鍵字 | 等價的關鍵字 | | --- | --- | | center | center center | | top | top center 或 center top | | bottom | bottom center 或 center bottom | | right | right center 或 center right | | left | left center 或 center left | background-position屬性的幾種寫法： 1. `background-position:top;` 2. `background-position:50% 50%;` 【百分數值居中】 `background-position:66% 33%;` 【圖像放在水平方向 2/3、垂直方向 1/3 處】 3. `background-position:50px 100px;` 【長度值解釋的是元素內邊距區左上角的偏移，偏移點是圖像的左上角。比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上】 ## background-attachment設置背景圖像是否固定或者隨著頁面的其余部分滾動。 | 值 | 說明 | | :-- | :-- | | scroll | 背景圖片隨頁面的其余部分滾動。這是默認 | | fixed | 背景圖像是固定的 | | inherit | 指定background-attachment的設置應該從父元素繼承 | | local | 背景圖片隨滾動元素滾動 | ***** 實例： body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; }