CSS從入門到精通——背景樣式（續）

顯示效果如圖：

本例中，設置right top代表放置在元素內邊距區的右上角。

對於具體位置，大家可以使用如下關鍵字的組合：

屬性值

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

如果值定義了一個關鍵詞，那麼第二個值將是”center”。當然也可以使用百分比和長度值，現在只作爲了解。

背景關聯

當頁面較長時，滾動頁面，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。如果想要背景圖像不隨頁面滾動而改變位置。可以使用background-attachment屬性，將其值設置爲fixed。

body {
    background-image: url("https://www.educoder.net/attachments/download/211104");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

簡寫背景

從上面的實例中，大家學習了多種背景屬性的設置，爲了簡化這些屬性的書寫，我們可以將這些屬性合併在同一個屬性中。

例如：

body {
    background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
}

使用簡寫屬性時，屬性值的順序爲：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

以上屬性無需全部使用，大家可以按照頁面設置使用。