網誌背景圖教學
主旨：暫時解決網誌無法自訂背景的困擾..
- 到目前為止僅適用Microsoft Internet Explorer 上而已。
- 因為MSN Spaces擋掉了background-image: url() 的通用背景樣式設定...
- 是無意間測試發現的.....^^"
- 最下面有 Step by Step 教學 。 (4/19修改)
- 使用半透明背景主題的人士，加上濾鏡會與MSN Spaces的濾鏡發生衝突，效果大減。
要如何模擬成有背景圖片呢？
HTML語法：(紅色為關鍵部份，不可去掉)
本文寬與本文高設定成 100% 就能延展擴大至整個網誌內容....像本篇背景
＊1.只要設定背景圖片位址和寬高(純網誌背景圖而已)(background-color: TRANSPARENT;已省略)
<div style="WIDTH: 100%;">
<img height="圖高" src="背景圖片" width="圖寬" align="right">
<div style="float:left;WIDTH: 100%; ">
內容
</div>
</div>
＊.最簡單背景之設法(純網誌背景圖而已)(連圖寬都不用設) <- 4/17
<img src="背景圖片" align="right">
<div style="float:left;WIDTH: 100%;">
內容
</div>
＊2.可自行設定本文寬、本文高(需使用絕對大小如px)，也可自行加線框，配合★圖層框框製作附加捲軸變化 教學，會有豐富效果。
HTML部分(background-color: TRANSPARENT;已省略)
<div style="WIDTH: 本文寬; HEIGHT: 本文高;">
<img height="圖高" src="圖片位址" width="圖寬" align="right">
<div style=" WIDTH: 本文寬; HEIGHT: 本文高;">
內容
</div>
</div>
範例：
HTML：
<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">內容
<br>
<br>
圖片在文字下方</font>
</div>
</div>
結果：
內容
圖片在文字下方
$進階用法：
◊在前景部份(上方部份)可以換成圖片濾鏡
範例 1(文字變透明)：
HTML：
把【background-color:TRANSPARENT;】
換成其中一種濾鏡【filter:alpha(opacity=35,finishOpacity=35,style=0);】
<DIV style="WIDTH: 109px; HEIGHT: 108px"><IMG height=108 src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width=109 align=right>
<DIV style="FLOAT: left; WIDTH: 109px; HEIGHT: 108px; filter:alpha(opacity=50, finishOpacity=50,style=0)"><BR>
<b><FONT color=#ff00ff>內容 <BR><BR>圖片在文字下方</FONT></b></DIV></DIV>
結果：【文字也變透明了】
內容
圖片在文字下方
範例 2(圖片也重疊了)：
HTML：【再把內容換成圖片】
<DIV style="WIDTH: 109px; HEIGHT: 108px"><IMG height=108 src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width=109 align=right>
<DIV style="FLOAT: left; WIDTH: 109px; HEIGHT: 108px; filter:alpha(opacity=50, finishOpacity=50,style=0)">
<IMG height=108 src="http://storage.msn.com/x1plMlLh5OuvLUJCkwU76rRa6brGDcBU02OcTTQi4o59hUqkhhrPM7IRjO0QKmfhyvBdGeOTA3KwnrqmMuW1B3tMkW6TSUM-MlhBX7DCiDOt3aQnWkFSBDpug" width=109></DIV></DIV>
結果：【圖片也變透明了】
◊在背景部份(下方部份)也可以多加圖片濾鏡
範例：
HTML：背景圖多加圓形濾鏡
<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">內容
<br>
<br>
圖片在文字下方</font>
</div>
</div>
結果：
內容
圖片在文字下方
＊因為只有一種方法可以實現背景圖，那就是把本文浮動置左，圖案浮動置右。所以也造成圖片永遠在右邊的問題。
這裡提供一個解決辦法，可以讓圖片 【永遠置左】HTML語法：(就是多加一個透明圖片，一起置右，置右寬度是100%)
<div style="WIDTH: 100%; ">
<img src="透明圖片" width=100% align="right"><img height="圖高" src="背景圖片" width="圖寬" align="right">
<div style="float:left; WIDTH: 100%; ">
內容
</div>
</div>
提供一個透明圖片位址: http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_7_0?1113334951.gif
這裡提供一個解決辦法，可以讓圖片"強制" 【永遠置中】
嘿嘿....那就是多包一層<DIV align=center>拉...相對的要填好本文寬度
HTML語法 :
<div align=center>
<div style="WIDTH: 本文寬; ">
<img src="背景圖片" width="100%" align="right">
<div style="float:left; WIDTH: 100%; ">
內容
</div></div></div>
國良先生的反應：
我試了一下「float:left; background-color: TRANSPARENT」可以省略，DIV本身就是透明的。http://spaces.msn.com/members/klcincn/Blog/cns!1pWxxpDggkEo38woh3bmyOEQ!129.entry
很可惜只能用在ＩＥ。這不算ＢＵＧ，只是各家瀏覽器支援ＣＳＳ及實作程度的差異。
答：
在經過重複測試後，float:left;要不要加要看情形 ，如果你只要有一個<DIV>限定本文框且是絕對大小(如 px,pt)的話則可以省略；反之如果沒有半個<DIV>限定本文框且裡面那層<DIV>設成相對大小(如100%)，則要加上float:left ; 所以如果想把網誌內容能擴展全部介面的話，float:left ;是不可省略的，但是如果都沒設寬度，就算加了float:left ;也無用。
在查書之後，DIV本身就是透明的，而且background-color: TRANSPARENT; 也沒有下向下兼容的問題，MSN也不太可能把每個DIV故意設成其他顏色，所以是可以省略的。大家想調整透明度，可以加上濾鏡（見前景部份）
最後當然也改了部份教學..4/17
ellie 的反應 :
提問，普通背景我試過了，已經沒有問題，但是我想問
「波形效果 :
<DIV style="FILTER: Wave(strength=5,lightstrengh=5); WIDTH: 134px; HEIGHT: 140px"><img src="圖片.jpg" ></div>」
這個指令，能不能和背景和在一起，我試了一下，還是不知道把這個命令加在哪合適。。。苦惱中。。。
答 :
使用其他濾鏡，請代換FILTER:的參數即可 ，所以你可以用FILTER: Wave(strength=5,lightstrengh=5)；代換上述範例HTML裡的紅色字即可。
Step by Step 教學：
- 請先輸入好你的網誌內容。
- 打開記事本複製以下內容
置左及置右人士：
<div style="WIDTH: 100%; ">
<img src="透明圖片" width=100% align="right"><img height="圖高" src="背景圖片" width="圖寬" align="right">
<div style="float:left; WIDTH: 100%; ">
內容
</div>
</div>
置中人士：
<div align=center>
<div style="WIDTH: 本文寬; ">
<img src="背景圖片" width="100%" align="right">
<div style="float:left; WIDTH: 100%; ">
內容
</div></div></div>
- 置左及置右人士要看此步驟：
輸入透明圖片位置(為了置左用)....
如果覺得沒差請把<img src="透明圖片" width=100% align="right">刪除就能還原成置右，然後請跳到下一步
(提供一個透明圖片位址: http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_7_0?1113334951.gif)
- 置左及置右人士：捲軸拉到最右邊...輸入你要放的 "背景圖片網址" 和 圖寬 、圖高。
圖寬、圖高 隨你高興設多大就多大
不過也可參考這個(附近即可)
(網誌最大寬度圖)
置中人士：
1.依照你的網誌大小,填入不要比上圖(網誌最大寬度圖)還大的本文寬值
2.輸入你要放的 "背景圖片網址"
- 像本篇輸入好之後如下圖，之後看你要不要替背景加上圓形濾鏡，如果不要請跳到第 7 步。
像本篇範例要放此圖
- 請在 align="right" 的後方 輸入理想的濾鏡 ，如 style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)"
更多濾鏡參考（圖片濾鏡）
- 把該填的填完之後，請從第 1 行複製到 "內容" 那一行
- 回到你的網誌編輯處，打開"網誌內容擴充編輯器" ，
並把 使用 HTML 格式建立網頁。 打勾，見到下一步驟
(沒有「使用HTML格式建立網頁」這個欄位 ..要看MSN Spaces 編輯網誌內容擴充工具或直接使用 原網誌編輯工具網址才有)
- 把 使用 HTML 格式建立網頁。 打勾之後，
請在所有內容的最上面貼上剛剛在第7步驟裡 [記事本] 複製的內容。
- 貼完之後如下圖，再把多餘的 內容 兩字刪除
- 置左及置右人士：刪掉之後，請把捲軸拉至最底，請在所有內容的最後方輸入 </div></div>
置中人士：刪掉之後，請把捲軸拉至最底，請在所有內容的最後方輸入 </div></div></div>
- 把 使用 HTML 格式建立網頁。 打勾取消之後，就能看到成功的變化囉。
(最後請注意 ，已設好背景圖片的網誌內容，直接在網頁上編輯可能會影響到圖片寬度，如果真的影響到，在勾上 使用 HTML 格式建立網頁。在網誌內容最前端找到width=修改回來)
- 謝謝你的觀賞.
-
有任何問題一定要先到 
看看喔
Edit
- 下面是本篇Step by Step教學範例完成的結果
萊子晝歸今始好，潘園景色夏偏濃。
夕陽流水吟詩去，明月青山出竹逢。
兄弟相歡初讓果，鄉人爭賀舊登龍。
佳期少別俄千里，雲樹愁看過幾重。
도구 
(5/1)
還沒用過這些產生器嗎? 很好用喔~ 小綠人特別設計的喔~!
