|
一、圖片濾鏡效果：
所選圖片地址：紅色部分換上圖片地址；
http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_4.jpg
1. 柔化 :<img src="圖片地址.jpg" style="filter:alpha(opacity=25, finishOpacity=25,style=0)">
2. 柔邊(左往右) :<img src="圖片地址.jpg" style="filter:alpha(opacity=0, finishOpacity=100,style=1)">
3. 圓形柔化(外往中央):
<img src="圖片地址.jpg" style="filter:alpha(opacity=100, finishOpacity=0,style=2)">
4. 灰色效果 :
<img src="圖片地址.jpg" style="filter: gray">
5. 左右翻轉(zhuǎn) :
<img src="圖片地址.jpg" style="filter:FlipH()">
6. 發(fā)光效果 :
<div style="width: 220px; height: 214px;filter:glow(color=#ffffff, strength=6)"><img src="圖片地址.jpg" ></div>
<<
7. 投射陰影效果
<DIV style="FILTER: Shadow(color=#4A7AC9,direction=135); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="圖片地址"></DIV>
8.附陰影效果：
<div style="filter:Dropshadow(參數(shù));width:寬;height:高" align=center><br><img src="圖片地址"></div>
參數(shù)
color -->發(fā)光顏色
offX -->水平位移(可正可負(fù))
offY -->垂直位移(可正可負(fù))
慮鏡寬=圖片寬度+水平位移絕對值+10
濾鏡高=圖片高度+垂直位移絕對值+10+10
范例:
<DIV style="FILTER:Dropshadow(color=#333333,offX=5,offY=5); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_4.jpg"></DIV>
效果:
9. 水波紋效果
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="圖片地址"></DIV>
10. 半透明波形
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><img src="圖片地址" style="filter:Alpha(opacity=100,finishOpacity=0,style=2)"></DIV>
11 圖片抽絲效果
<BR></B><BR><BR>
<TABLE border=0>
<TBODY>
<TR>
<TD style="FILTER: wave (add=true,freq=100,lightstrength=100,phase=1,strength=1)" width=220 background=圖片地址 height=375></TD></TR></TBODY></TABLE>
<<
12 模糊效果：
<div style="filter:Blur(參數(shù));width:寬;height:高" align=center><br><img src="圖片地址"></div>
參數(shù)
direction -->方向(以45度角為單位)(0、45、90、135、180、225、270、315)
慮鏡寬要略大于圖片寬度(建議+15)
慮鏡高要略大于圖片高度(建議+15+10)
范例:
<DIV style="FILTER: Blur(direction=135); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_4.jpg"></DIV>
效果:
13 圖片霧化效果
<P align=center><TABLE border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity=100,style=2)"
width=420（圖片寬度） background=（圖片地址） height=296（圖片高度）></TD></TR></TOBDY></TBODY></TABLE></P>
效果；
14 圖片靜態(tài)倒影
<P align=center> <IMG height=高度 src="圖片地址" width=寬度><BR><IMG style="FILTER: wave
(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" height=高度 src="圖片地址" width=寬度> </p>
綠色部分就是大家總問的居中代碼，放在粉色代碼中間的東西全部居中！
效果
15 百葉窗
<TABLE cellSpacing=0 cellPadding=0 align=center border=0><TBODY><TR><TD style="FILTER: wave(add=true,freq=100,lightstrength=100,phase=4,strength=5)" width=240 background=（圖片地址）height=280></TD></TR></TBODY></TABLE>
效果；
16 上下顛倒
<TABLE style="FILTER: flipv" height=450 width=630 align=center background=圖片地址 border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE>
效果
17 其他特效
<center><TABLE height=358 cellSpacing=0 cellPadding=0 width=285 border=0><TBODY><TR><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_9?1149056929.jpg" width=15 border=0></TD><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_3?1149056929.jpg" width=51 border=0></TD><TD width=162 background=http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_5 height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_7?1149056929.jpg" width=42 border=0></TD><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_5?1149056929.jpg" width=15 border=0></TD></TR><TR><TD width=15 background=http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_6 align=middle colSpan=3><IMG height=280 src="http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_4.jpg" width=240 border=0></TD><TD width=15 background=http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_7 height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_96_0?1149058124.jpg" width=15 border=0></TD><TD background=http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_8.jpg colSpan=3></TD><TD><IMG height=39 src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_96_2?1149058124.jpg" width=15 border=0></TD></TR></TBODY></TABLE>
注意：只能更換藍(lán)色的圖片地址，其他地址不要動。
效果；
<<
18 左右 逐漸顯示
<center><MARQUEE scrollAmount=3 direction=right width=400 height=234><MARQUEE scrollAmount=3 width=280 height=234><DIV align=center><IMG src="http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_4.jpg "></DIV></MARQUEE></MARQUEE>
效果；
19 上下逐漸顯示
<MARQUEE scrollAmount=3 direction=up behavior=alternate height=250><MARQUEE scrollAmount=3 direction=up height=234><DIV align=center><IMG src="http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_4.jpg "></DIV></MARQUEE></MARQUEE>
效果；
二、圖文排列：
左圖文字：<P><IMG src="圖片連接地址" height=100 width=100 align=left>文章內(nèi)容<BR> <BR clear=left></P>
文章內(nèi)容
注：heiht width 是圖片的高和寬。若，字左圖右，只需把left改為right.
三、添加背景代碼：
<div align=center><TABLE style='BACKGROUND-REPEAT:no-repeat; background-position:center center' background=圖片地址 width=265 height=360 ><TBODY><TR><TD style='filter:Glow(strength=12,color=#4A7AC9) ;' align='center' valign='middle'><font style='font-size:9pt;' color=#00ff00>以下內(nèi)容請自己編輯：這是第1行<br>這是第2行<br>這是第3行<br>這是第4行<br>這是第5行<br>這是第6行<br>這是第7行<br>這是第8行<br><img src=http://www./BGFilter/images/2008.gif></font></TD></TR></TBODY></TABLE></div>
綠色部分寫上你需要說的話或文字，注意所有的<br>不要動它。
|
以下內(nèi)容請自己編輯：這是第1行
這是第2行
這是第3行
這是第4行
這是第5行
這是第6行
這是第7行
這是第8行
|
四、移動圖片的代碼：
<marquee><img src=http:///images/logo.gif width="180" height="60"</img></marquee>
|
