網頁教學：利用CSS語法設定背景顏色及圖案

 

壹、設定背景顏色

      網頁背景配色及圖案之選用，關係著網頁整體之設計感。在CSS樣式表中也有屬性可以用來設定網頁背景及圖片。在CSS語法中，設定背景顏色之屬性為『background-color』屬性，相當於HTML語法中之『bgcolor』屬性，其輸入之語法如下所示：
                                          body { background-color:設定值; }
【小提示：『background-color』屬性之設定值可以用顏色名稱(英文)、HEX碼及RGB碼來設定。】

      圖1為利用CSS語法設定背景顏色(採用『內嵌宣告』之方式) 之範例，圖2為該範例以瀏覽器執行之結果。由圖1及圖2之內容可發現，：『background-color』屬性不僅只可用於網頁背景顏色之設定，亦可用於表格背景顏色之設定。

圖1  利用CSS語法設定背景顏色(採用『內嵌宣告』之方式)

圖2  以圖1之內容製作之網頁內容(以瀏覽器執行之結果)

貳、設定背景圖案

 

表1  設定背景圖案之屬性一覽表

屬性	屬性用途	設定值	備註
background-image	設定背景圖案	url(圖檔相對路徑)	url(images/background.jpg)
background-repeat	設定是否重複顯示背景圖案	1.repeat 2.repeat-x 3.repeat-y 4.no-repeat	url(images/background.jpg)
background-attachment	設定背景圖案是否隨網頁捲軸捲動	1.fixed(固定) 2.scroll(隨捲軸捲動)	url(images/background.jpg)
background-position	背景圖案位置	1.x% y% 2.x y 3.(top,center,bottom) (left,center,right)	url(images/background.jpg)
background	綜合應用	可以設定好所有背景圖案之屬性。	url(images/background.jpg)

一、<background-image>屬性

圖3  <background-image>屬性之輸入語法(採用『內嵌宣告』之方式)

圖4  以圖3之內容製作之網頁內容(以瀏覽器執行之結果)

二、<background-repeat>屬性

      <background-repeat>屬性之設定值共有以下四種，詳細說明如下：

• repeat：預設值，重複並排顯示，即填滿整個背景或儲存格，示如圖4。
• repeat-x：x軸方向(水平方向)重複顯示，示如圖6。
• repeat-y：y軸方向(垂直方向)重複顯示。
• no-repeat：不重複顯示。

圖5  <background-repeat>屬性之輸入語法

圖6  以圖5之內容製作之網頁內容(以瀏覽器執行之結果)

三、<background-attachment>屬性

四、<background-position>屬性

      <background-position>屬性之設定值必須有兩個數值，分別為x軸與y軸之數值，而其輸入之數值可以是座標數值(例如輸入x軸與y軸之座標：20px 50px)或直接輸入位置(例如center right)。其輸入之語法如下：
                    <style type="text/css">body { background-position:20px 50px } </style>
             或是<style type="text/css">body { background-position:20px 50% } </style>

 

圖7  <background-position>屬性之使用範例(採用『內嵌宣告』之方式)

圖8  以圖7之內容製作之網頁內容(以瀏覽器執行之結果)

五、<background>屬性

      使用<background>屬性時，可以一次將背景圖片之屬性設定完成，其輸入語法如下：
                     <style type="text/css">body { background：url(images/open.jpg) repeat-x fixed 100% 100%; } </style>
【小提示：在設定<background>屬性之設定值時，各個設定值沒有前後順序，只要以空格分開就可以了。】