CSS3 背景

概覽

CSS3 包含幾個新的背景屬性，它們提供了對背景更強大的控制。

新的屬性

• background-size: 規定背景圖片的尺寸。

• background-origin: 規定背景圖片的定位區域。

• background-clip: 規定背景的繪製區域。

瀏覽器支持

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景屬性。

背景尺寸

background-size 屬性規定背景圖像的尺寸。

body{
    background: url('bg_flower.gif');
    background-size: 63px 100px;
    background-repeat: no-repeat;
    padding-top: 80px;
}

設置背景尺寸的方式有如四種

數值定義

設置背景圖像的高度和寬度。

第一個值設置寬度，第二個值設置高度。

若是隻設置一個值，則第二個值會被設置爲 auto。

百分比

以父元素的百分比來設置背景圖像的寬度和高度。

第一個值設置寬度，第二個值設置高度。

若是隻設置一個值，則第二個值會被設置爲 auto。

cover

使背景圖像擴充到足夠大，以使背景圖像徹底覆蓋背景區域。

你能夠將其等同於 background-size: 100% auto;

背景圖像的某些部分也許沒法顯示在背景定位區域中。

contain

把背景圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。

使背景圖像最大，但不會超出背景區域，等效下面的狀況：

• 若是背景區域寬大於高的尺寸，至關於 background-size: auto 100%;

• 若是背景區域高大於寬的尺寸，至關於 background-size: 100% auto;

下圖展現了不一樣屬性值的效果。

背景圖像定位區域

background-origin 屬性規定 background-position 屬性相對於什麼位置來定位。

背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。

div {
    background: url('bg_flower.gif');
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

定位區域默認是在 padding-box.

多背景圖像

CSS3 容許您爲元素使用多個背景圖像。

body {
    background-image:url('bg_flower.gif'),url('bg_flower_2.gif');
}

每一個圖像還能夠使用不一樣的屬性。

p {
    background:
    url('turq_spiral.png') 30px -10px no-repeat,
    url('pink_spiral.png') 145px 0px no-repeat,
    url('gray_spiral.png') 140px -30px no-repeat,  #ffbd75;
}

背景顏色繪製區域

background-clip 屬性規定背景顏色的繪製區域。同background-origin的屬性值。

background-clip: border-box|padding-box|content-box;

其餘背景屬性請參照 CSS 背景