说明:
图片效果一为图片的CSS滤镜线状透明效果;
图片效果二为图片的CSS滤镜园形透明效果;
图片效果三为图片的CSS滤镜菱形透明效果;
图片效果四为图片的FLASH动态闪图背景效果之一;
图片效果五为图片的FLASH动态闪图背景效果之二 。
上面这些图片效果实际是如何制作的呢?
先介绍几种图片效果HTML代码。
Ⅰ、图片的CSS滤镜--图片透明效果代码:(三者均可)
代码(1):<img src="图片网址" style="filter:Alpha(opacity=100,finishOpacity=0,style=3)">
代码(2):<div style="width:750px;height:615px;filter:Alpha(opacity=100,finishOpacity=0,style=3)"><img src="图片网址"></div>
代码(3):<IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 615px;
HEIGHT: 750px" src="图片地址" width=750 height=615 >
参数说明:
涉及到的属性:修改数值对应即可
opacity:开始处的透明度
finishOpacity:结束处的透明度
style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明
Ⅱ、图片的FLASH动态闪图背景效果代码:(二者均可)
代码(1):<TABLE style="WIDTH: 750px; HEIGHT: 615px" border=0 width=750 background
=图片地址height=615>
<TBODY>
<TR>
<TD><STRONG><EMBED height=615 type=application/x-shockwave-flash width=750 src=动画地址 wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></STRONG> <A href="http://wcxh.ok.blog.163.com/blog/static/278211432009101405149326/"></A></TD></TR>
</TBODY></TABLE></P>
代码(2):<DIV></DIV><TABLE borderColor=#cd5c5c height=350 width=450 align=center
border=3>
<TBODY>
<TR>
<TD background=图片地址>动画代码或文字特效代码粘贴处</TD></TR></TBODY></TABLE>
下面我们来看看衍变过程:
一、首先找到你所需要的图片
以上面图片效果为例,实际上下面这幅图才是我找的图片原型(见下图)
二、将找到的图片粘贴到日志模板中,点击日志编辑器上方的 “<> ”,会显示如下HTML代码:
<P><IMG src="http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg"></p>
(或<P><IMG style="WIDTH: 750px; HEIGHT: 615px" src="http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg"></p>)
三、在上面HTML代码的IMG后添加代码,WIDTH是图片宽度像素,HEIGHT是图片高度像素,也可以
锁定宽高比定义高度HEIGHT:auto;
一)、园形透明效果添加代码:style="FILTER: Alpha(opacity=100,style=2); MARGIN: 0px 10px; WIDTH: 750px; FLOAT: none; HEIGHT: 615px; cssFloat: none"
加入后整个代码即为:
<P><IMG style="FILTER: Alpha(opacity=100,style=2); MARGIN: 0px 10px; WIDTH: 750px; FLOAT: none;
HEIGHT: 615px; cssFloat: none" src="http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg"><p>
二)、菱形透明效果添加代码:style="FILTER: alpha(style=3,opacity=100, finishopacity=2); WIDTH: 750px;
HEIGHT: 615px"
或:style="FILTER: Alpha(opacity=200,style=3); WIDTH: 750px; HEIGHT: 615px"
加入后整个代码即为:
<P><IMG style="FILTER: alpha(style=3,opacity=100, finishopacity=2); WIDTH: 750px; HEIGHT: 615px" ; src="http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg"><p>
或:<P><IMG style="FILTER: Alpha(opacity=200,style=3); WIDTH: 750px; HEIGHT: 615px" ; src="http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg"><p>
三)、线状透明效果添加代码:style="FILTER: Alpha(opacity=100,style=1); WIDTH: 615px; HEIGHT:
750px" src="http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg" width=750 height=615
加入后整个代码即为:
<P><IMG style="FILTER: Alpha(opacity=100,style=1); WIDTH: 615px; HEIGHT: 750px" src="http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg" width=750 height
=615 ></p>
四)、动画背景效果添加代码:
<table border="0" width="750" background="http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg " align="center" height="615"> <tbody> <tr> <td><embed height="615" allownetworking="internal" align="right" width="750" allowscriptaccess="never" quality="high" invokeurls="false" src="http://www.zxtx.org/user/yiyi/html/flash/014.swf" type="application/x-shockwave-flash" wmode="transparent"> <a href="http://a527736639.blog.163.com/"> </a></td></tr></tbody></table></font></p>
或:
<TABLE style="WIDTH: 750px; HEIGHT: 615px" border=0 width=750 background =http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg height=615>
<TBODY>
<TR>
<TD><STRONG><EMBED height=615 type=application/x-shockwave-flash width=750 src=http://imgfree.21cn.com/free/flash/4.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></STRONG> <A href="http://wcxh.ok.blog.163.com/blog/static/278211432009101405149326/"></A></TD></TR></TBODY>
</TABLE></P>
五)、 动画背景效果五添加代码 :
<table border="0" width="750" background="http://img5.ph.126.net/1Ok4jtNVDjBD5bEPxBRE2g==/2269251262242863585.jpg " align="center" height="615"> <tbody> <tr> <td><font color="#be4f14">
<embed height="615" allownetworking="internal" align="right" width="750" allowscriptaccess="never" quality="high" invokeurls="false" src="http://yemaishuyin.web-33.com/user/yemaishuyin/wysc-tmfls/50.swf" type="application/x-shockwave-flash" wmode="transparent"></A></TD></TR></TBODY>
</TABLE></P>
再点击日志编辑器上方的“<> ”,这样就制作成功了日志中美化后的图片效果!
赶快尝试一下吧,感受一下制作成功后的喜悦。
文 摘 网络;BLUESWAY 编
评论