背景設定(background)

body
background :
色碼;                                         
   /*背景底色*/
background-image : url('
背景圖片網址');          /*背景圖片網址*/
background-repeat :
 repeat;                          /*背景圖片重複排列*/
background-attachment:
 fixed;                         /*背景圖片固定*/

}  

 

[解說]
 

1. body{background:色碼;}設定的是背景圖未出現之前的背景色(背景底色),也可以不設定背景圖而僅設定背景色。

若背景欲透明,語法則改為background: none或不要加。

 

2. 背景圖片網址應為http://.....開頭,大部分為jpg或bmp或gif圖檔。

如果背景圖片突然自動消失表示該圖片置放的網路空間壞掉了,建議把你的背景圖片上傳置放在無名相簿空間當中,比較穩定

(但無名圖片不可外連,即使用無名圖片當連結只可以用在無名的網頁裡)。
 

3.利用無名圖片當背景的方法:點擊該圖片(點至最大張尺寸),在圖片上面按滑鼠右鍵,選內容,複製新開啟視窗之網址貼於語法裡面即可。

網址格式如下:
http://pic32.pic.wretch.cc/photos/1/p/ppkeigo/38/1120130848.jpg                     (正確網址)
http://www.wretch.cc/album/show.php?i=ppkeigo&b=38&f=1120130848&p=71  (錯誤網址)

<圖解說明>利用無名圖片當背景

 

4. background-repeat:no-repeat          /*背景不重覆*/ 
background-repeat:repeat-x               /*背景在X軸方向重覆*/
background-repeat:repeat-y               /*背景在Y軸方向重覆*/
background-position : right                /*背景位置靠右*/
background-position : left                  /*背景圖靠左*/
background-position : center             /*背景圖置中*/

(註1) 背景本身要夠大張(請用繪圖軟體自行設計),才可使背景完整填滿整個頁面,不然就要用repeat語法去填充整個頁面。

(註2) 利用繪圖軟體設計背景時建議圖片大小為1024X600(畫素),相簿框的大小為120X120(畫素)。(螢幕解析度為1024X768時適用)
 

5. background-attachment: fixed表示固定背景效果(浮水印效果),背景不會隨捲軸移動而移動,拿掉這個語法背景就會隨捲軸移動。
 

6. 可自行設定背景圖片的位置:如我現在要把背景設定在畫面的右下角(數字可自行設定),
則語法為background-position:90% 90% /*設定背景圖片於平面座標位置*/

(設計技巧)如果你的背景圖片想要自己調整位置時,先調整長(height)寬(width)至一定長寬度,然後用這個語法去設定。

7.表格裡面也常利用加入背景的語法來美化版面。

如在留言板的留言格裡面可加入背景語法為.side{background-image: url("背景網址");}

所以你可以在任意的地方加入你想要的背景圖片,僅需改變HTML標籤即可(大括號裡面樣式屬性的用法都是一樣的)。

 

[範例]

BODY { 
background:#009900;
background-image: url(http://pic32.pic.wretch.cc/photos/1/p/ppkeigo/15/o1133712483.jpg); 
background-repeat:repeat ;
background-attachment: fixed;
}

Posted by chenmike at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()