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

江南小爱网易空间

聆听旋律感悟 赏析诗画意境

 
 
 

日志

 
 

【转载】在边框内做雾化图片代码  

2013-03-10 21:49:00|  分类: 雾化技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

在边框内做雾化图片代码

 

 

一、制作梦幻(雾化)效果的方法:

就是在添加内容的代码中蓝色代码 TABLE这个元素后面)添加一个CSS滤镜的梦幻效果代码--<TD style="FILTER: Alpha(opacity='100',style='2')" 很简单,识破不值半文钱!

二、边框和梦幻效果的代码其中:红色代码是边框代码,蓝色代码是添加内容的代码,粉红色代码是添加内容代码部分的结束标记.

框图和梦幻(雾化)效果的代码如下(注:未加图片空白代码简介)

<P align=center> (P 是指开始 对齐结盟定位=居中的)
<TABLE(表式;平地层 制表;嵌合) cellSpacing单元距离=5 cellPadding=0 width宽度=700 background景图片=第一层(是最外边的边框)图片地址 border=0>
<TBODY> (表格主体)
<TR> (梯形)
<TD> (任务)
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第2层边框图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第3层边框图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第4层边框图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第5层边框图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第6层(是写日志底版)图片地址 border=0>
<TBODY>
<TR>
<TD>
<P align=center><IMG src="动态小图网址(gif或jpg格式)"></P>
<TABLE 在此处加一个CSS滤镜代码就有梦幻效果了 borderColor=#d2b48c height=230 cellSpacing=1 width=360 align=center background=主体图片地址 border=8>
<TBODY>
<TR>
<TD align=middle width="100%"><EMBED src=透明flash小动画网址 width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high">
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 在边框内做雾化图片代码- 0 - 0

 

三:现在就按以上的代码,代入相应的图片制作实用的框架。

符边框素材图片实样

第一第和三层在边框内做雾化图片代码- 0 - 0 第二层在边框内做雾化图片代码- 0 - 0第四层在边框内做雾化图片代码- 0 - 0第五层在边框内做雾化图片代码- 0 - 0第六底面图在边框内做雾化图片代码- 0 - 0

取得图片地址的方法:用你的鼠标指向图片→点右键→点属性就能得到 

在边框内做雾化图片代码- 0 - 0

 

代入图片后的实例代码如下 

<P align=center>
<TABLE title="" borderColor=#cccccc cellSpacing=5 cellPadding=0 width=700 align=center bgColor=#ffffff background=http://img319.ph.126.net/x3jVDN0HOzMUsjLud15skg==/3825807883451405866.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=26 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img.ph.126.net/5-JvzuYXK19f2B9UpGGVZA==/3224295858221899188.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=5 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img319.ph.126.net/x3jVDN0HOzMUsjLud15skg==/3825807883451405866.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img.ph.126.net/Kw0exm1Cu71ypvjVSy9Bdw==/2783224569731803869.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img764.ph.126.net/jQoAU6c1xw-IflOTfVeH5w==/2979131153506663753.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=25 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img306.ph.126.net/fWDr2KwAQ1RP8bh2hRMpEA==/3869999454795603069.jpg border=0>
<TBODY>
<TR>
<TD align=middle>
<P align=center>
<TABLE style="FILTER: Alpha(opacity=100,style=2)" borderColor=#d2b48c height=660 cellSpacing=1 width=480 align=center background=http://img5.ph.126.net/aYaLUkF5UOoxmlDdCgOKUA==/1028228089941043145.jpg border=8>
<TBODY>
<TR>
<TD align=middle width="80%"><EMBED src=http://imgfree.21cn.com/free/flash/27.swf width=332 height=480 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"> </TD></TR></TBODY></TABLE>
<P></P>
<TABLE style="FILTER: Alpha(opacity=100,style=2)" borderColor=#d2b48c height=749 cellSpacing=1 width=562 align=center background=http://img.bimg.126.net/photo/RacWbAghW_0TUYV7__w0ZA==/1740078306025790778.jpg border=8>
<TBODY>
<TR>
<TD align=middle width="93%"><EMBED src=http://imgfree.21cn.com/free/flash/157.swf width=322 height=470 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"> </TD></TR></TBODY></TABLE>
<P></P>
<TABLE style="FILTER: Alpha(opacity=100,style=2)" borderColor=#d2b48c height=750 cellSpacing=1 width=498 align=center background=http://img.bimg.126.net/photo/OSmYQUO8K4u7egiIlxniPQ==/1977643186369465102.jpg border=8>
<TBODY>
<TR>
<TD align=middle width="93%"><EMBED src=http://imgfree.21cn.com/free/flash/92.swf width=470 height=332 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"> </TD></TR></TBODY></TABLE>
<P></P>
<TABLE style="FILTER: Alpha(opacity=100,style=2)" borderColor=#d2b48c height=600 cellSpacing=1 width=404 align=center background=http://img.bimg.126.net/photo/TJXCJTpNPBKPDhkCPR3l3w==/899594025567857779.jpg border=8>
<TBODY>
<TR>
<TD align=middle width="120%"><EMBED src=http://imgfree.21cn.com/free/flash/9.swf width=322 height=470 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal">
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

在边框内做雾化图片代码- 0 - 0v

 

四、用以上实例代码实际效果如下

 

 

梦幻 (雾化) 实例

 

在边框内做雾化图片代码- 0 - 0

例图①动画+FLASH透明图片

 

在边框内做雾化图片代码- 0 - 0

例图②普通单张图片+单张Flash透明图片

 

在边框内做雾化图片代码- 0 - 0

例图③

 

在边框内做雾化图片代码- 0 - 0

例图④

 

在边框内做雾化图片代码- 0 - 0

 

符例图①原图片

在边框内做雾化图片代码- 0 - 0

制作实用代码中的具体说明

框边的第一层所设定的宽度为700,即:(width=700)是指限定了最外边的宽度,从而:第二层到最后的底面就不需的用数值来控制了,都可设为"100%",即:(width="100%"),这个"100%"是指在最外层的控制下的"100%"。注:(第一层"即最外边框"最大宽度可设定为890~900)。
  在第一层边框代码中(cellSpacing=5)设定为5,是指单元格距离,也即就是控制边缘外露能显现的部份,数值越大边缘显现得越宽。
  在最后一层单元格距离为何在设定为25呢?即:(cellSpacing=25)。然而广大爱用边框写日志的朋友们通常都设为0,这里留出的25部份起到什么作用呢?这个问题也值得商讨,因为如果设为0当你写入文字时,文字的前后都靠足边缘,看起来不美观,如果设定了25,文字的前后就不会靠足边缘,这是为了写入文字后比较美观之故。
  注意事项①:边框宽度用数值来控制时不需的用引号(例:width=700或890),用百分比控制必须在用引(例:width="100%")。
  注意事项②:制作梦幻(雾化图片)效果,代码必需要齐全,标点符号也不能少,图片的宽和高度必须要符合原图片尺寸,雾化效果中的
style=2,数值2为圆型,改为3是方型,改为4就不起雾化作用了。雾化的程度Alpha(opacity=100,数值可改小,但基本上没有多大变化。

在边框内做雾化图片代码- 0 - 0

 为了让朋友们能看得更明显 以下用的是黑色底版面

 

关于雾化图片的通用代码及实样如下

普通雾化图片代码

<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity='100',style='2')"
width=500 background=http://img234.ph.126.net/wMmFdC3U9pKt-fnJJ1NnAQ==/2122039849423080662.jpg height=300><P></P></TD></TR></TBODY></TABLE>

说明:红色部份是图片地址,可以更换,绿色部份是图片宽度,黄色部份是图片的高度,宽度和高度的数值要根据图片实际尺寸修改.

雾化图片实样

原图片实样

在边框内做雾化图片代码- 0 - 0

 

符雾化加(FLASH)图片的通用代码及实样如下

<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity='100',style='2)" width=500 background=http://img848.ph.126.net/1cDFFgHqS3tna1CqZ5K-bw==/692146967733335605.jpg height=300>
<P align=center><EMBED src=http://www.xcwhw.cn/fla/jrxq/177.swf width=500 height=300 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></P></TD></TR></TBODY></TABLE>

说明:以上代码中的红色部份是(FLASH)图片。

加入一张烟花动态透明图片后的效果如下

原图片对比

在边框内做雾化图片代码- 0 - 0

 

 

 

  评论这张
 
阅读(89)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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