2010年3月5日 星期五

【css】更換網頁背景底圖

在改網頁css時必學的就是更改網頁底圖


"body"可以算是最下層的底圖


"定位框"則是在"body"之上


所以body的底圖若修改


定位框的範圍內不會受到變動


只有body減掉定位框剩下的空間會被變更


改body底圖的語法:


body{ 
    margin:0px 0px 0px 0px;
    text-align:
center;
    background-image:url(圖片網誌);
    background-attachment:fixed;
    background-repeat:repeat;
}


語法解說:


margin:0px 0px 0px 0px;   定義底圖擺放位置


text-align:
center;  使用此背景圖像


background-image:url(圖片網誌);  要更改的圖片網址


background-
attachment:fixed;  表示拉動捲軸時底圖不動


background-repeat:repeat;  重複貼背景底圖


可換參數: 


repeat-x;  背景底圖從左至右一列


repeat-y;  背景底圖從上到下一行 


no-
repeat;   背景底圖只顯示一張 


repeat:repeat; 重複貼背景底圖




定位框的背景底圖更改:


/*定位框*/ 


#wrap{}
#container {
        position:relative;
        text-align: left;
        width:986px;
        padding:0px;
        margin:0px auto;
        background:url(圖片網址) repeat-y center;
        border:0px solid #6e6e6e;
        overflow:hidden;
}


語法解說:


background:url(圖片網址) repeat-y center;


就與改body背景底圖一樣


可以自己選擇想要的貼圖方式與貼的圖片


可換參數: 


repeat-x; 
背景底圖從左至右一列


repeat-y;  背景底圖從上到下一行 


no-
repeat;   背景底圖只顯示一張 


repeat:repeat;
重複貼背景底圖



-------------------------我是分隔線-----------------------


雖然有時背景底圖不是必要的


像我也都是"空白"一片....


極簡風也是很有它的風格 (雖然我的版面應該是很凌亂複雜.....)


但body與定位框間距太大的話


感覺有點空虛


添加個圖片是一個不錯的選擇~










沒有留言:

張貼留言