close

在改網頁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與定位框間距太大的話

感覺有點空虛

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





arrow
arrow
    全站熱搜

    Aldrich 發表在 痞客邦 留言(0) 人氣()