分享

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

 夏春清风 2010-06-10

  图片羽化也有的叫雾化,就是用图像软件或代码制作,使图片边缘产生朦胧的美化效果。代码作图片羽化的方法很容易,用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为矩形. 



 


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



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


  显示效果:




 


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



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


  显示效果:

 







 



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



  显示效果:





 



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



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



  显示效果:

草原牧埸



 



击点打开html代码浏览器

  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编

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



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

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多