分享

图片各种滤镜特效代码* -

 多多小虎丫 2010-12-19

图片各种滤镜特效代码*

 

 

 

 

图片各种滤镜特效代码
百万书库 - 香儿 - xianger

 

 

 


透明

透明效果(一)


图片滤镜特效代码 - 香儿 - xianger


透明代码(一)

<img src="图片地址" style="filter:Alpha(opacity=100,finishOpacity=0,style=0)">

【代码说明】涉及到的属性:修改数值对应即可

opacity:开始处的透明度

finishOpacity:结束处的透明度

style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明

透明效果(二)


图片滤镜特效代码 - 香儿 - xianger


透明代码(二)

<div style="filter:Alpha(opacity=100,finishOpacity=0,style=0) ;width:宽;height:高"><img src="图片地址"></div>

【代码说明】涉及到的属性:修改数值对应即可

opacity:开始处的透明度

finishOpacity:结束处的透明度

style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明


模糊效果


图片滤镜特效代码 - 香儿 - xianger

模糊代码


<div style="filter:Blur(direction=135);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

【代码说明】(direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,滤镜高=图高+30)


波形效果



图片滤镜特效代码 - 香儿 - xianger

波形效果代码


<div style="filter:Wave(freq=7,strength=9,lightstrength=5,phase=5);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>


 【代码说明】
(freq频率(>0)strength振幅强度(>0)lightstrength波峰强度(0~100愈高越黑)phase起始相位(0~100),滤镜宽=图宽+振幅强度×2,滤镜高=图高+振幅强度×2+10)

 

风吹效果

风吹效果代码

<CENTER><TABLE style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" cellSpacing=5 cellPadding=0><TBODY<CENTER><TABLE style="FILTER: wave(freq=11, strength=4, phase=6, lightstrength=10)" cellSpacing=5 cellPadding=0><TBODY><TR><TD width=图片宽度 background=图片地址  height=图片高度></TD></TR></TBODY></TABLE></CENTER>


图片静态倒影效果

图片滤镜特效代码 - 香儿 - xianger
图片滤镜特效代码 - 香儿 - xianger



图片静态倒影代码

<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>

圆形渐变透明(虚光)效果

圆形渐变透明(虚光)代码


<CENTER><TABLE style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" cellSpacing=5 cellPadding=0><TBODY><TR><TD width=图片宽度 background=图片地址 height=图片高度></TD></TR></TBODY></TABLE></CENTER>


翻转

左右翻转效果



图片滤镜特效代码 - 香儿 - xianger


左右翻转代码

<img src="图片地址" style="filter:FlipH">

或者

<div style="filter:FlipH ;width:宽;height:高"><img src="图片地址"></div>

上下翻转效果



图片滤镜特效代码 - 香儿 - xianger


上下翻转代码

<img src="图片地址" style="filter:FlipV">

或者

<div style="filter:FlipV ;width:宽;height:高"><img src="图片地址"></div>


变调效果

灰调格式效果


图片滤镜特效代码 - 香儿 - xianger

灰调格式代码


<img src="图片地址" style="filter:Gray">

或者

<div style="filter:Gray ;width:宽;height:高"><img src="图片地址"></div>

X光效果


图片滤镜特效代码 - 香儿 - xianger

X光效果代码


<img src="图片地址" style="filter:Xray">

或者

<div style="filter:Xray ;width:宽;height:高"><img src="图片地址"></div>

色彩对换效果


图片滤镜特效代码 - 香儿 - xianger

色彩对换代码


<img src="图片地址" style="filter:Invert">


或者

<div style="filter:Invert ;width:宽;height:高"><img src="图片地址"></div>

 

浮雕效果

浮雕效果代码

<CENTER><TABLE style="FILTER: progid:DXImageTransform.Microsoft.Emboss()" cellSpacing=5 cellPadding=0><TBODY><TR><TD width=图片宽度 background=图片地址 height=图片高度></TD></TR></TBODY></TABLE></CENTER>


添加边框效果


发光边框效果


图片滤镜特效代码 - 香儿 - xianger


发光边框代码

<div style="filter:Glow(color=#4A7AC9,strength=15);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

【代码说明】(color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度×2,滤镜高=图高+发光强度×2 +10)


投影边框效果




图片滤镜特效代码 - 香儿 - xianger


投影边框代码

<div style="filter:Shadow(color=#4A7AC9,direction=135);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

 【代码说明】(color为发光颜色代码,direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25)

滤镜高=图高+40)

 


阴影边框效果




图片滤镜特效代码 - 香儿 - xianger


阴影边框代码

<div style="filter:Dropshadow(color=#333333,offX=5,offY=5);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

 【代码说明】(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽 +水平位移绝对值+ 10,滤镜高=图高 +垂直位移绝对值 +20)

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约