圖片各種藝術(shù)特效處理
一、圖片濾鏡效果:
所選圖片地址:紅色部分換上圖片地址;
http://image7.360doc.com/DownloadImg/2010/01/1522/2174705_4.jpg1. 柔化 :<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="