在边框内做雾化图片代码

昵称5616265 2013-11-27

展开全文

在边框内做雾化图片代码

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

就是在添加内容的代码中（蓝色代码 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 - 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，数值可改小,但基本上没有多大变化。

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

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

普通雾化图片代码

<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity='100',style='2')" width=500 background=http://image67.360doc.com/DownloadImg/2013/11/2722/37032577_8.jpg height=300><P></P></TD></TR></TBODY></TABLE>

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

雾化图片实样

原图片实样

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

<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity='100',style='2)" width=500 background=http://image67.360doc.com/DownloadImg/2013/11/2722/37032577_9.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)图片。

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

原图片对比