修改blog背景和顏色的心得

根據我的小小經驗，使用css來進行定義比較方便、準確，而且在多個表格內使用時，效果更顯著。

什麼是css？
在blog的代碼上，一般可以見到形如以下的代碼

以下內容為程式碼:
<style type="text/css">
<!--
.diary_datetitle {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 10pt; font-weight: bold; color: #858585; background-color: #F0F0F0}
.line {  border-color: black black #CCCCCC; border-style: dotted; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px}
td {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 9pt}
.tt_title {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 20px; font-weight: bold}
......
-->
</style>
 

注意是這些定義要插在<style type="text/css">與</style>之間

最簡單，如果要設定整個頁面的背景。你可以在css中添加一項
body {background-color:yellow}
那麼整個頁面的背景就是***了

或者自訂blog描述所在的表格表格
.abc {background-color:white}
然後在blog的blog描述所在表格內加上：
<td class=abc>#dis_tag#</td>
那麼，blog描述的背景就是白色了。關鍵就是搞清楚這部分的意思，設定背景方法相同

以下是設定背景用到的定義項：

·背景顏色 background-color
上面已說明，不用多說了

·背景圖片 background-image

例：body{background-image:url('你的背景圖片的地址')}
意思就是整個頁面的背景為圖片，圖片地址是：http://www.abc.com/bg.gif 這種情況下，沒有為圖片加任何定義，背景圖片會在瀏覽器內任何地方不斷重複排列，就像我們設定windows的壁紙。下面說的就是如何對背景圖片的屬性進行定義' target=_blank>http://www.abc.com/bg.gif。這種情況下，沒有為圖片加任何定義，背景圖片會在瀏覽器內任何地方不斷重複排列，就像我們設定windows的壁紙。下面說的就是如何對背景圖片的屬性進行定義

·圖片是否重複顯示 background-repeat

例：
body{background-image:url('你的背景圖片的地址') background-repeat:no-repeat}
背景圖片不重複排列，只顯示一次。一般是用於較大面積的圖片，並多與下面列出的各定義項配合使用

例：body{background-image:url('你的背景圖片的地址') background-repeat:repeat-x}
背景圖片只在水平方向重複排列
例：body{background-image:url('你的背景圖片的地址')  background-repeat:repeat-y}
背景圖片只在垂直方向重複排列
以上兩項很少用到。

·定位元影像片顯示位置 background-position

圖片出現在背景的某個地方，也是從水平方向和垂直方向定義。
水平方向值：left|center|right
垂直方向值：top|center|bottom
例子：body{background-image:url('你的背景圖片的地址')  background-repeat:no-repeat; background-position:right bottom}
也就是圖片出現在右下角且不重複

亦可以使用具體數值來定義
例子：body{background-image:url('你的背景圖片的地址')  background-repeat:no-repeat; background-position:100px 50px}
圖片就會出現在距瀏覽器左邊緣100象素 右邊緣50象素的地方出現

·控製圖片是否滾動 background-attachment

如上面的一例，圖片出現在100px 50px的位置，但當捲軸向下滾動的時候，圖片就依然停留在原來的位置，也就是看不到背景圖片，這時候就需要用到background-attachment了。主要是使用一個值：fixed

body{background-image:url('你的背景圖片的地址‘)  background-repeat:no-repeat; background-position:100px 50px;background-attachment: fixed}

ps:你的背景圖片的地址裡添加的圖片最好是gif格式的圖片，因為這種圖片做背景的話效果比較適合網頁的解析度。
就是這些定義值，至於表格內的背景圖片設定也是一樣，只是位置的相對參考由瀏覽器，變成表格的邊緣而已。動手試一試就很容易明白。