個人檔案m1net ™相片部落格清單 工具 說明
30/4/2005

背景效果的制作方法

 


 

  1. 到目前為止僅適用Microsoft Internet Explorer 上而已。
  2. 是無意間測試發現的.....^^"
  3. 最下面有 Step by Step 教學 。

要如何模擬成有背景圖片呢?

HTML語法:(紅色為關鍵部份,不可去掉) 

本文寬與本文高設定成 100% 就能延展擴大至整個網誌內容....像本篇背景

*1.只要設定背景圖片位址和寬高(純網誌背景圖而已)(background-color: TRANSPARENT;可省略)

<div style="WIDTH: 100%; HEIGHT: 100%;">
<img height="圖高" src="背景圖片" width="圖寬" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 100%; HEIGHT: 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=" background-color: TRANSPARENT;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>


結果:
 

回應 (387)

請稍候...
很抱歉,您輸入的回應過長。請縮短您的回應。
您尚未輸入內容,請再試一次。
很抱歉,目前無法新增您的回應,請稍後再試。
若要新增回應,您的父母必須先給您權限。要求權限
您的家長已關閉回應功能。
很抱歉,目前無法刪除您的回應,請稍後再試。
您已超過每日回應上限次數,請於 24 小時後再試一次。
由於系統顯示您可能傳送垃圾郵件給其他使用者,因此您帳號中的回應功能已遭停用。 如果您認為自己帳號遭錯誤停用,請連絡 Windows Live 支援
請完成下列安全檢查,以完成回應。
您輸入的安全檢查字元必須與圖片或音訊中的字元相符。

若要新增回應,請以您的 Windows Live ID 登入 (若您使用 Hotmail、Messenger 或 Xbox LIVE,則您已擁有 Windows Live ID)。登入


沒有 Windows Live ID?註冊

ROBIN撰寫:
terrific
7 月 6 日
jilljill撰寫:
多谢了~你真牛哦~~
6 月 3 日
郑丁菡撰寫:
不懂,姐,你要好好教我
 
4 月 27 日
莊小米撰寫:
唉...早知道年輕的時候多讀點書,看得我頭暈腦漲,真是佩服佩服.
10 月 31 日
ZhangCindy撰寫:
看起来还不错
考试完了好好来研究研究
10 月 28 日
请问,那怎么改颜色呢??
9 月 23 日
jj撰寫:
你啥时变这么强了?还是一直都这么强?
8 月 25 日
倩水幽兰撰寫:
怎么都看不懂呀!郁闷~~~~~!!???
8 月 10 日
 其实也不那么麻烦.就这样就可以了.
<img src=图片地址>这样就可以了..大小可以自己拖动.很方便.
7 月 30 日
团子撰寫:
复制进去,不行啊.怎么搞呀??
7 月 29 日
生活撰寫:
哈哈,我也没看明白.茫然!
7 月 26 日
日之环撰寫:
请加我,OK?
7 月 21 日
Kevin撰寫:
看得有点的晕,不过也有点懂。。。试试先~~
7 月 20 日
傅佳撰寫:
背景是有了,可是不能写字了……再继续努力吧!总之,谢谢你!
7 月 19 日
陈Maya撰寫:
不是太清楚,没看明白。
 
7 月 11 日
刚起步 不会 谁能帮我解答么
6 月 25 日
KJ's Angel撰寫:
谢谢啦,又学会了一招.
6 月 7 日
王清瑜撰寫:
还是看不懂啊?
6 月 2 日
刘灵灵撰寫:
谢谢!
5 月 30 日
liu璐撰寫:
背景是有了可是怎么编辑文字呀?
5 月 28 日