關於部落格大背景設定

2009032411:00

 

 

有些版型如果非必要,我很少會加入背景的設定,

因為背景佔了部落佈置視覺感的一半,

所以大多就留給使用者自己去設定,這樣多少也會跟其他使用人有些區隔。

 

稍稍提一下通常初學者的疑問

就是一旦動過【自訂CSS欄位】,【進階設定】的一部分背景設定功能就會失效,

這是正常反應,如果想要恢復的話,只要在【各式樣版】挑選一個版型重新設定就可以了。 

注意的是一旦重新設定樣版,那自訂欄位的CSS語法就會回復到原始設定喔!

所以在重設樣版前,記得得先把自定欄位的語法先用文件複製下來吶!!

否則之前自己所做的一些語法設定就全消失啦@@得重設囉!

 

那麼…關於整篇版面語法裡,要如何找出和設定背景呢?

首先在一整篇版面CSS語法裡找到這段:

/*Background image for whole page 背景圖*/
BODY { background: #FFFFFF url( ) no-repeat;backgroud-position: 0% 50%;background-attachment: fixed; }

裡頭藍色部分,可能因為所需設定有些不同。

要如何依需要設定背景呢? 我把語法拆開講解各功能:

 

background: #FFFFFF url( ) no-repeat;

#FFFFFF 設定背景顏色;填入色碼,一般繪圖軟體的顏色設定裡應該都會顯示色碼,網路上也可以搜尋到相關設定工具。

url( ) 圖片網址;只要將你要使用的背景圖網址填入( )號內

   例: url( http://xxx.zzz/001.gif )

   一次只能設定一張圖;所以你如果要使用一張以上,只好自己先用繪圖軟體拼接成一張囉!

no-repeat; 圖片不重複; 也可以改成 repeat; 重複、repeat-x; 橫向重複、 repeat-y; 直向重複 ; 有這四種設定方式,當然只能選一種囉!

 

backgroud-position: 0% 50%;  圖片位置設定;這通常是用在單一圖片的位置;

   圖片位置在背景類似就像是九宮格一樣,可以設定成九個方向:

backgroud-position: 0% 0%; 《圖在左邊上方》
backgroud-position: 0% 50%;  《圖在左邊中間》
backgroud-position: 50% 0%; 《圖在中間上方》
backgroud-position: 50% 50%; 《圖在正中間》
backgroud-position:100% 0%;  《圖在右邊上方》
backgroud-position: 0% 100%;   《圖在左邊下方》
backgroud-position: 100% 50%;  《圖在右邊中間》
backgroud-position: 50% 100%;  《圖在中間下方》
backgroud-position: 100% 100%;  《圖在右邊下方》

  能理解裡頭的變化方式,就可以自己去變更0%~100%之間的微調。

 

background-attachment: fixed;  固定背景;另一個是 scroll (隨捲軸捲動)雅虎本來就是捲動scroll的設定,所以如果想背景捲動只要刪掉這段background-attachment: fixed; 語法就可了。

 

設定好語法編輯就像這樣下面範例

/*Background image for whole page 背景圖*/
BODY { background: #FFFFFF url(http://xxx.zzz/001.gif  ) no-repeat;backgroud-position: 0% 50%;background-attachment: fixed; }

 

其他的版面設定 很多部落都有教學 這裡的部落教學分類裡也有提到一些;

爬過文還是不太懂的想提問;也不用客氣可以提出來詢問喔!

我知道的話也會盡量詳細解說的 ^^