图片各种艺术特效处理

 

图片各种艺术特效处理    一、图片滤镜效果：           所选图片地址：红色部分换上图片地址；            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. 左右翻轉 : <img src="图片地址.jpg" style="filter:FlipH()">      6. 发光效果 : <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(参数);width:宽;height:高" align=center><br><img src="图片地址"></div> 参数 color             -->发光颜色 offX              -->水平位移(可正可负) offY              -->垂直位移(可正可负) 虑镜宽=图片宽度+水平位移绝对值+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(参数);width:宽;height:高" align=center><br><img src="图片地址"></div> 参数 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   图片静态倒影 <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>   注意：只能更换蓝色的图片地址，其他地址不要动。   效果； << 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>    效果； vior=alternate height=250>   二、图文排列： 左图文字：<P><IMG  src="图片连接地址" height=100 width=100 align=left>文章内容<BR> <BR clear=left></P> 文章内容 注：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>以下内容请自己编辑：这是第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>不要动它。    以下内容请自己编辑：这是第1行 这是第2行 这是第3行 这是第4行 这是第5行 这是第6行 这是第7行 这是第8行     << 四、移动图片的代码： <marquee><img src=http:///images/logo.gif width="180" height="60"</img></marquee>                     ldm2124086blog 口袋欢迎你