CSS 教學  >  背景屬性


在 CSS 中常見的背景 (background) 屬性有以下幾種： background-color background-image background-repeat background-attachment background-position 每一個屬性在以下會有詳細地介紹： background-colo..

在 CSS 中常見的背景 (background) 屬性有以下幾種：

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

    每一個屬性在以下會有詳細地介紹：

    background-color

    background-color 屬性是用來指定背景的顏色。

      CSS 樣式  顯現結果

      p {background-color: 00FF00;}  


      綠色背景  

      p {background-color: red;}  


      紅色背景  

    background-image

    background-image 屬性是用來指定用什麼圖案來當做背景。

    CSS 樣式顯現結果

    p {background-image:url(yp.jpg);}

    有背景圖案


    background-repeat

    background-repeat 屬性是用來指定背景圖案重不重複。預設值是 "repeat"，代表此背景圖案將在 x- 及 y-方向都會重覆。其他的值為 x-repeat (x-方向重複)、y-repeat (y-方向重複)、以及 no-repeat (不重複)。

    舉例如下：

    CSS 樣式顯現結果

    p {
      background-image:url(yp.jpg);
      background-repeat: no-repeat;
    }

    背景圖案不重複。


    p {
      background-image:url(yp.jpg);
      background-repeat: repeat-x;
    }

    背景圖案在 x-方向重複。


    p {
      background-image:url(yp.jpg);
      background-repeat: repeat-y;
    }

    背景圖案在 y-方向重複。


    p {
      background-image:url(yp.jpg);
      background-repeat: repeat;
    }

    背景圖案在 x- 及 y-方向重複。


    background-attachment

    background-attachment 屬性是用來指定背景圖案是否在螢幕上固定。這個屬性可能的值為 "fixed" (當網頁捲動時，背景圖案固定不動) 以及 "scroll" (當網頁捲動時，背景圖案會跟著移動)。

    以下是兩個例子：

    body {background-attachment: fixed;
      background-image: url("yp.jpg");
      background-repeat: no-repeat;
    }     		body {background-attachment: scroll;
      background-image: url("yp.jpg");
      background-repeat: no-repeat;
    }

    background-position

    background-position 屬性是用來指定背景圖案的位置。它的值可以是：

    • 兩個字：第一個字為 [top,center,bottom] 中三選一，而第二個字由 [left,center,right] 中三選一。
    • 兩個百分比：第一個百分比為 x-軸的百分比，第二個為 y-軸的百分比。
    • 兩個數目：第一個數目為 x-軸的位置，第二個數目為 y-軸的位置。

    舉例如下：

    body { background-image: url("yp.jpg");
      background-repeat: no-repeat;
      background-position: center center;
    }     		body { background-image: url("yp.jpg");
      background-repeat: no-repeat;
      background-position: 20% 20%;
    }

    下一頁： CSS 顏色