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

格林浪人 博客

一杯清茶常伴着我的孤寂,抚慰着一颗沉思的心!

 
 
 

日志

 
 

07:用代码制作图片羽化效果  

2010-07-11 21:29:25|  分类: 代码教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
欢迎您!启步学代码。

(游子学习笔记。 供初学HTML代码的朋友参考)


用代码制作图片羽化效果

  图片羽化也有的叫雾化,就是用图像软件或代码制作,使图片边缘产生朦胧的美化效果。代码作图片羽化的方法很容易,用html贴图标签加入css样式表滤镜属性和属值语句即可.祥细内容如下:
  ⑴ html贴图标签:  
   <img src=.......width=宽度>   
  ⑵ css样式表滤镜属性和属值语句:  
   style="FILTER: alpha(opacity=100,style=2)"   
  ⑶ 用代码制作图片羽化模式:  
<img src="图片地" style="FILTER: alpha(opacity=100,style=2)"width=宽度>
  
  说明:
  ◆<img src=贴图标.
  ◆style=套用css样式表标记.
  ◆FILTER 属性名称:滤镜
  ◆alpha 属值:透明程度.
  ◆opacity 启始值0-100,0为透明,100为原图,通常是100.
  ◆style=2或3,羽化效果,2为圆形,3为矩形. 




  图片羽化(圆形)代码实例:

<CENTER> <img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" style="FILTER: alpha(opacity=100,style=2)"width=300> </CENTER>


  说明:
  ◆关键语句:opacity=100,style=2


  显示效果:

07:用代码制作图片羽化效果 - 格林浪人 - 格林浪人 欢迎您!



  图片羽化(矩形)代码实例:

<CENTER> <img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" style="FILTER: alpha(opacity=100,style=3)"width=300> </CENTER>


  说明:
  ◆关键语句:opacity=100,style=3


  显示效果:



07:用代码制作图片羽化效果 - 格林浪人 - 格林浪人 欢迎您!





  羽化图片再加上移动标签,也可作各种方向移动,例如来回走的代码:

<marquee behavior=alternate><BR> <img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" style="FILTER: alpha(opacity=100,style=2)"width=300><BR> </marquee></p>


  显示效果:

07:用代码制作图片羽化效果 - 格林浪人 - 格林浪人 欢迎您!





  在羽化图片上还可用绝对定位加叠文字、图片和Flash等内容,代码如下:

<TABLE style="LEFT: -50px; WIDTH: 800px; POSITION: relative; TOP: 0px"> <TBODY> <TR> <TD style="FILTER: Alpha(opacity=100,style=3)" width=700 background=http://hiphotos.baidu.com/淡然的人生路途/pic/item/6b31ef2a35400b2a5343c1f5.jpg height=700> <DIV style="LEFT:300px; WIDTH: 750px; POSITION: absolute; TOP: 280px; HEIGHT: 300px"> <DIV style="FILTER: shadow(color=#000066, strength=10); WIDTH: 600px"> <font face=隶书 style=font:40pt;color=#00ff00><b> 草原牧埸 </b></font></DIV></DIV> <EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 100px; HEIGHT: 300px" align=center src=http://imgfree.21cn.com/free/flash/59.swf width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <EMBED style="LEFT: 10px; WIDTH: 600px; POSITION: absolute; TOP: 360px; HEIGHT: 300px" align=center src=http://www.easelq.cn/wode/flash/dongwu/lumi.swf width=600 height=250 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> </TD></TR></TBODY></TABLE>


  说明:
  ◆TABLE style=表格标签套用样式表标记.
  ◆POSITION: relative 样式表语句:相对定位,作为绝对定位的容框.
  ◆<TD style="FILTER: Alpha 在表格的列标签中套用样式表图片羽化.
  ◆<DIV style= 嵌套样式表绝对定位挂贴文字.
  ◆<EMBED style=套用样式表绝对定位挂贴Flash-飞雁.
  ◆<EMBED style=套用样式表绝对定位挂贴Flash-鹿.



  显示效果:

草原牧埸





击点打开html代码浏览器

07:用代码制作图片羽化效果 - 格林浪人 - 格林浪人 欢迎您!
  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编
2010年7月11日 格林浪人整编

(为了让更多网友学用html代码制作音画贴,本贴欢迎转载.但是.我用了很多时间和精力编写这些资料的,转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢!)

  评论这张
 
阅读(299)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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