在改網頁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與定位框間距太大的話
感覺有點空虛
添加個圖片是一個不錯的選擇~
留言列表