CSS 背景屬性



CSS 教學  >  背景屬性

在 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 顏色



    Copyright 2007-2009   1keydata.com,   All Rights Reserved.



  • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)
    CSS 表格 (Table)
    CSS 位置 (Position)
    CSS 文字 (Text)
    CSS 浮動 (Float)
    CSS 清除 (Clear)
    CSS 滑鼠游標圖案

    CSS 樣式