图片各种艺术特效处理
一、图片滤镜效果：
所选图片地址：红色部分换上图片地址；
http://image93.360doc.com/DownloadImg/2016/01/2514/65025286_2.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. 左右翻轉 :
<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="//image93.360doc.com/DownloadImg/2016/01/2514/65025286_2.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="//image93.360doc.com/DownloadImg/2016/01/2514/65025286_2.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://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_1?1149056929.jpg></TD><TD><IMG 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://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_8?1149056929.jpg></TD><TD align=middle colSpan=3><IMG height=280 src="
http://image93.360doc.com/DownloadImg/2016/01/2514/65025286_2.jpg" width=240 border=0></TD><TD width=15 background=http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_95_6?1149056929.jpg></TD></TR><TR><TD><IMG 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://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_96_1?1149058124.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://image93.360doc.com/DownloadImg/2016/01/2514/65025286_2.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://image93.360doc.com/DownloadImg/2016/01/2514/65025286_2.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.tool.la/BGFilter/images/2008.gif></font></TD></TR></TBODY></TABLE></div>
绿色部分写上你需要说的话或文字，注意所有的<br>不要动它。
以下内容请自己编辑：这是第1行
这是第2行
这是第3行
这是第4行
这是第5行
这是第6行
这是第7行
这是第8行
<<四、移动图片的代码：
<marquee><img src=http://9soho.com/images/logo.gif width="180" height="60"</img></marquee>
网易博客代码入门制作
