注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

xianger

 
 
 

日志

 
 

图片各种艺术特效处理  

2009-10-19 10:38:03|  分类: 【电脑制作】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 金色分隔线 - 香儿
图片各种艺术特效处理 
 

一、图片滤镜效果:          

所选图片地址:红色部分换上图片地址;           

http://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.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">

 

 图片滤镜效果 - L.Yan - し.yǎn菂愽客

 

   

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://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.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>

 

 


图片滤镜效果 - L.Yan - し.yǎn菂愽客

 

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://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.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://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.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://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.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://img.bimg.126.net/photo/bVi968lQJJeV2MUqKYti0w==/895090425940412121.jpg "></DIV></MARQUEE></MARQUEE>   

 

效果;

vior=alternate height=250>
图片艺术(滤镜)效果处理 - 博客虫 - 博客虫

 

二、图文排列:


左图文字:<P><IMG  src="图片连接地址" height=100 width=100 align=left>文章内容<BR> <BR clear=left></P>

图片滤镜效果 - L.Yan - し.yǎn菂愽客文章内容

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


 

图片滤镜效果 - 博客虫 - 博客虫       

 

 
网易博客代码入门制作

香儿编辑 .

☆ 博客基本代码解读大全

一分钟打造自己的个性时钟

一分钟建立自已的日报

滚动边框综合代码

教你制作自己的播放器

文字各种移动代码

滑动边框诠释(一)

滑动边框诠释(二)

滑动边框诠释(三)

网易播放器及代码解读

一分钟搞定基本链接

一分钟学会首页的添加

一分钟学会添加flash

打造自己个性的小屋

常见网络术语

网易博客代码(印章)

图片超链接代码

巧用迅雷下载技巧5则

没有什么是查不到的

网易播放器的参数含义

代码使用手册

风格自定义工具制作

提高博客的点击率

常用embed代码教程

可嵌入博客图片播放器

自我形象制作代码

打造图片的特殊效果

中国图片网址大全

代码易懂使用手册

自动生成你自己的时钟

显示你空间的来访

把想要的放到首页

WINDOWS 重装必做

文字各种移动代码

一分钟博客必备常识

常用HTML语法攻略

 

 

 

 

  评论这张
 
阅读(18547)| 评论(20)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017