CSS 背景 14. (Background)

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

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

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

    background-color

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

    image

    background-image

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

  • image

    background-repeat

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

    舉例如下:

     

    image

    background-attachment

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

    以下是兩個例子:

    image

     

    background-position

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

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

    舉例如下:

     

    image

    發表迴響

    你的電子郵件位址並不會被公開。 必要欄位標記為 *

    你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>