NW Guide
導覽
导览
 hot
個性化全攻略
每日報到
 谜题
繁體 简体
 NST

工作
大雪怪
 

此頁瀏覽數
(07年11月8日新增)

 

 

 

 

 

 

 

 

 

 

 

转换:简体中文

 
 
 

背景語法教學

在本頁裡瞬間移動,請選擇背景語法的種類:填滿固定並排進階

*廣告

本頁所教的語法適用在尼奧的這些網頁:
商店描述展覽館設置用戶查找寵物描述寵物主頁你的協會

語法要怎麼使用呢?答案:只要將語法中的"圖片網址"改成你
想要使用的圖片之網址,再將語法複製、貼上到網頁中即可。

要如何知道網頁中的圖片網址?對著網頁圖片按下滑鼠右鍵,選擇[內容]就可以看見囉!
好用的圖片相簿:ImageshackPhotobucket,皆可外連,本站使用的圖片都是存放在後者。


[填滿]的背景圖片語法
你設置的背景會佈滿整個頁面。你的文字和網頁中的內容則會顯示在背景的前面。

語法一解說:語法一是很常見的設置背景圖的語法。可是不知為何 ,當尼奧2007年4月大改版後就無法使用在每個人的用戶 查找之中。但是,除此之外的尼奧頁面都可使用此背景語法哦。 語法一:
<body background="圖片網址">
語法二解說:效果和語法一完全相同!但是語法二可以使用在你的用戶 查找裡! 語法二:
<style>body
#main {background:url(圖片網址)}</style>

在用戶頁面使用[填滿背景]的截圖(下圖左):

解說:藍綠色格子就是背景圖。由一張張的藍綠色格子圖(如上圖右)將整個背景給填滿,所呈現出的背景效果,就像是使用了一張很大張的格子背景似的,這種背景圖就叫作[無接縫背景圖]。尼奧也有提供這種背景圖哦!但是如果你的背景會造成別人看不清楚網頁中的文字,就可以先用修圖軟體將背景圖調淡一些,本站偏好使用Photoimpact來修圖,並且看書即可自學。

置於一角的[固定背景]圖片語法


無論網頁怎麼拉動,你的背景圖仍然一直處於網頁的右下角。
(圖中黃色箭頭指著的滾輪代表網頁已經拉至中間的位置了,但是背景圖都紋絲不動。)

將圖片置於網頁中某一個角落的語法。 <style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:水平設定 垂直設定;
background-repeat:no-repeat;}
</style>
解說:
語法中紅字的[
水平設定]可以改填入:right(右)或是left(左)或是center(中央)。
語法中紅字的[
垂直設定]可以改填入:top(上端)或是center(中央)或是bottom(底部)
如果你填入了
left top(左上),那麼你的背景圖就會一直"黏"在網頁的左上角。
這裡有本站製作的網頁,是將背景固定在右下角(right bottom)。

為了讓你更快速的使用語法,本站將各種語法都列出來了,你只需要修改圖片網址:

將背景圖固定置於網頁左上角位置的背景語法:

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:left top;
background-repeat:no-repeat;}
</style>

將背景圖置於左中央

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:left center;
background-repeat:no-repeat;}
</style>

將背景圖置於左下角

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:left bottom;
background-repeat:no-repeat;}
</style>

將背景圖置於中上方

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:center top;
background-repeat:no-repeat;}
</style>

將背景圖置於正中央

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:center center;
background-repeat:no-repeat;}
</style>

將背景圖置於中下方

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:center bottom;
background-repeat:no-repeat;}
</style>

將背景圖置於右上角

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:right top;
background-repeat:no-repeat;}
</style>

將背景圖置於右中央

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:right center;
background-repeat:no-repeat;}
</style>

將背景圖置於右下方

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:right bottom;
background-repeat:no-repeat;}
</style>
*在用戶查找使用[固定背景]語法:
以上的語法無法使用於你的用戶 查找(即使加了也無作用),但是在加入一串文字之後就可以生效了!就是在body{background:url之間加入#main,那麼就會產生不可思議的效果。

你的語法將會變成(除了紅字部份,其他內容並無改變):

<style>body #main {background:url(圖片網址);
background-attachment:fixed;
background-position:水平設定 垂直設定;
background-repeat:no-repeat;}</style>

[左右/上下並排]的背景圖片語法

與上方的[固定背景]的語法類似,但是變成可以同時有多張圖片水平並排!只需要將之前語法中的no-repeat改成repeat-x(左右並排)或是repeat-y(上下並排),就能產生不可思議的改變!

水平並排解說:語法中的[水平設定]可以改以填入:top(上端)或是center(中央)或是bottom(底部) ,就會出現不同效果的並排背景圖。 水平並排語法:
<style>body {background:url(圖片網址);
background-attachment:fixed;
background-position:水平設定;
background-repeat:repeat-x;}</style>

將背景圖置於上方

<style>
body {background:url(圖片網址);
background-attachment:fixed;
background-position:center;
background-repeat:repeat-x;}
</style>

將背景圖置於中間

<style>
body {background:url(圖片網址);
background-attachment:fixed;
background-position:bottom;
background-repeat:repeat-x;}
</style>

將背景圖置於底端

<style>
body {background:url(圖片網址);
background-attachment:fixed;
background-position:top;
background-repeat:repeat-x;}
</style>
垂直並排解說:語法中的[垂直設定]可以改以填入:right(右) ,或left(左),或center(中央)。 垂直並排語法:
<style>body {background:url(圖片網址);
background-attachment:fixed;
background-position:垂直設定;
background-repeat:repeat-y;}</style>

將背景圖置右

<style>
body {background:url(圖片網址);
background-attachment:fixed;
background-position:right;
background-repeat:repeat-y;}
</style>

將背景圖置中

<style>
body {background:url(圖片網址);
background-attachment:fixed;
background-position:center;
background-repeat:repeat-y;}
</style>

將背景圖置左

<style>
body {background:url(圖片網址);
background-attachment:fixed;
background-position:left;
background-repeat:repeat-y;}
</style>
*在用戶查找使用[並排]的背景語法:
跟固定背景的方法相同,在body{background:url之間加入#main,那麼就會產生 魔法般的效果。

[混合更多效果]進階的背景語法

你也可以設定背景色,只要在{}之間加入background-color: #背景顏色;就OK了!

例如,使用上方最後一個垂直並列的語法來舉例,加入背景顏色的語法,就會變成:

總之要包在兩個括號{}之間。

<style>
body{background:url(圖片網址);
background-attachment:fixed;
background-position:right;
background-repeat:repeat-y;
background-color:#背景顏色;}
</style>
*[背景顏色]是要填什麼?如果是填入顏色代碼,就要在代碼前輸入#符號(例如你要將背景顏色設為膚色,就填入#ffffcc),如果你是要直接填顏色的名子(例如藍色是blue),就可以刪去#符號,直接輸入blue。你可以在網路上尋找"顏色代碼"就可以知道各顏色的代碼囉!

*注意事項:圖片網址一定要以http://作開頭,並且結尾一定是圖片的副檔名(常見的是jpg、gif或png),如此一來你設定的語法就會生效囉!

*~本站自製背景~*
(框中是圖片網址。全是無接縫背景)

http://i29.photobucket.com/albums/c270/mybasilisk4/background/bgs_leafage3.gif






-尼奧提供的圖片-
全屏
| 收集卡 | 素描 | 平鋪的

 

本頁內容有管理人辛苦研究一段時間的心血含在其中,非作者請勿盜文投稿尼奧時報。

 

*廣告