close
這次的教學是背景設定 =w= ~ (欸?
如果不會操作網誌小幫手的人~
就可以用此CSS語法
更換自己喜歡的背景ˇˇ


CSS語法如下ˇˇ


--------不要複製到我 囧--------

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

}  

--------不要複製到我 囧--------



``解說★
 

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

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

 

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

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

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

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

網址格式如下:
http://pic64.pic.wretch.cc/photos/10/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標籤即可(大括號裡面樣式屬性的用法都是一樣的)。


以上轉載自Keigo-凱哥's 無名相簿語法(CSS+Html)教學。

arrow
arrow
    全站熱搜

    colleen6423 發表在 痞客邦 留言(2) 人氣()