CSS 背景屬性用於定義HTML元素的背景。所有背景屬性都不能繼承。

• background ： 簡寫屬性，作用是將背景屬性設定在一個宣告中。
• background-color ： 設定元素的背景顏色。
• background-image ： 把影象設定為背景。
• background-repeat ： 設定背景影象是否及如何重複。
• background-attachment ： 背景影象是否固定或者隨著頁面的其餘部分滾動。
• background-position ： 設定背景影象的起始位置。

一、背景顏色

background-color 屬性定義了元素的背景顏色.

CSS中，顏色值通常以以下方式定義:

• 十六進位制 - 如："#ff0000"
• RGB - 如："rgb(255,0,0)"
• 顏色名稱 - 如："red"

頁面的背景顏色使用在body的選擇器中:

    body {background-color:#b0c4de;}

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_background-
color_body)

如果您希望背景色從元素中的文字向外少有延伸，只需增加一些內邊距：

    p {background-color: gray; padding: 20px;}

如需檢視本例的效果，可以[親自試一試](https://www.w3school.com.cn/tiy/t.asp?f=csse_background-

可以為所有元素設定背景色，這包括 body 一直到 em 和 a 等行內元素。

background-color 預設值是 transparent。transparent
有“透明”之意。也就是說，如果一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。

二、背景影象

background-image 屬性描述了元素的背景影象。background-image 屬性的預設值是 none，表示背景上沒有放置任何影象。

預設情況下，背景影象進行平鋪重複顯示，以覆蓋整個元素實體.

頁面背景圖片設定例項:

    body {background-image:url(paper.gif);}
 

嘗試一下 »

三、背景重複

預設情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。

repeat-x 和 repeat-y 分別導致影象只在水平或垂直方向上重複，no-repeat 則不允許影象在任何方向上平鋪。

預設地，背景影象將從一個元素的左上角開始。

如果影象只在水平方向平鋪 (repeat-x),

    body
    {
    background-image:url('gradient2.png');
    background-repeat:repeat-x; 
    
    
    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_background-
image_gradient2)

如果你不想讓影象平鋪，你可以使用 background-repeat 屬性:

    body
    {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    
    
    
    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_background-
image_norepeat)

四、背景定位

可以利用 background-position 屬性改變影象在背景中的位置:

    body
    {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top; 
    
    
    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_background-
image_position)

為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和
center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或
5cm，最後也可以使用百分數值。不同型別的值對於背景影象的放置稍有差異。

1、關鍵字

據規範，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對應垂直方向。

如果只出現一個關鍵字，則認為另一個關鍵字是 center。

如果希望每個段落的中部上方出現一個影象，只需宣告如下：

    p
      { 
        background-image:url('bgimg.gif');
        background-repeat:no-repeat;
        background-position:top;
    
    
    
      }

下面是等價的位置關鍵字：

• center： center center
• top： top center
• bottom： bottom center
• right： right center
• left： left center

2、百分數值

如果你想把一個影象放在水平方向 2/3、垂直方向 1/3 處，可以這樣宣告：

    body
      { 
        background-image:url('/i/eg_bg_03.gif');
        background-repeat:no-repeat;
        background-position:50% 50%;
    
    
    
      }

如果影象位於 0% 0%,表示影象中 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊。

如果影象位於 0% 0%，其左上角將放在元素內邊距區的左上角。如果影象位置是 100% 100%，會使影象的右下角放在右邊距的右下角。

如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。這一點與關鍵字類似。

background-position 的預設值是 0% 0%，在功能上相當於 top
left。這就解釋了背景影象為什麼總是從元素內邊距區的左上角開始平鋪，除非您設定了不同的位置值。

3、長度值

長度值解釋的是元素內邊距區左上角的偏移。偏移點是影象的左上角。

比如，如果設定值為 50px 100px，影象的左上角將在元素內邊距區左上角向右 50 畫素、向下 100 畫素的位置上：

    body
      { 
        background-image:url('/i/eg_bg_03.gif');
        background-repeat:no-repeat;
        background-position:50px 100px;
    
    
    
      }

注意，這一點與百分數值不同，因為偏移只是從一個左上角到另一個左上角。也就是說，影象的左上角與 background-position 宣告中的指定的點對齊。

五、背景關聯

如果文件比較長，那麼當文件向下滾動時，背景影象也會隨之滾動。當文件滾動到超過影象的位置時，影象就會消失。

您可以通過 [background-attachment
屬性](https://www.w3school.com.cn/cssref/pr_background-
attachment.asp)防止這種滾動。通過這個屬性，可以宣告影象相對於可視區是固定的（fixed），因此不會受到滾動的影響：

本例演示如何設定固定的背景影象。影象不會隨著頁面的其他部分滾動。

    body 
    {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    }

background-attachment 屬性的預設值是 scroll，也就是說，在預設的情況下，背景會隨文件滾動。

六、背景- 簡寫屬性

在以上例項中我們可以看到頁面的背景顏色通過了很多的屬性來控制。

為了簡化這些屬性的程式碼，我們可以將這些屬性合併在同一個屬性中.

背景顏色的簡寫屬性為 "background":

    body {background:#ffffff url('img_tree.png') no-repeat right top;}

嘗試一下
»

當使用簡寫屬性時，屬性值的順序為：:

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

以上屬性無需全部使用，你可以按照頁面的實際需要使用.

七、CSS3 背景

1、background-image屬性

CSS3中可以通過background-image屬性新增背景圖片。允許你在元素上新增多個背景影象。

不同的背景影象和影象用逗號隔開，所有的圖片中顯示在最頂端的為第一張。

    #example1 { 
        background-image: url(img_flwr.gif), url(paper.gif);
    
    
    
     
        background-position: right bottom, left top; 
        background-repeat: no-repeat, repeat; 
    }

嘗試一下
»

可以給不同的圖片設定多個不同的屬性

    #example1 {
        background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    }

嘗試一下
»

2、background-size 屬性:背景圖片的尺寸

background-size指定背景影象的大小。CSS3以前，背景影象大小由影象的實際大小決定。

CSS3中可以指定背景圖片，讓我們重新在不同的環境中指定背景圖片的大小。您可以指定畫素或百分比大小。

你指定的大小是相對於父元素的寬度和高度的百分比的大小。

重置背景影象：

    div
    {
        background:url(img_flwr.gif);
        background-size：80px 60px;
    
    
    
        background-repeat:no-repeat;
    }

嘗試一下 »

伸展背景影象完全填充內容區域：

    div
    {
        background:url(img_flwr.gif);
        background-size:100% 100%;
    
    
    
        background-repeat:no-repeat;
    }

嘗試一下 »

3、background-origin屬性:背景圖片的定位區域

background-origin屬性指定了背景影象的位置區域。

在content-box, padding-box,和 border-box區域內可以放置背景影象。

在 content-box 中定位背景圖片：

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

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss3_background-
origin)

4、background-clip屬性:背景的繪製區域

CSS3中background-clip背景剪裁屬性是從指定位置開始繪製。

    #example1 { 
        border: 10px dotted black; 
        padding: 35px; 
        background: yellow; 
        background-clip: content-box;
    
    
    
     
    }

嘗試一下 »