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

博览在线

眼界决定境界,心态决定人生;不是因为有了条件才成功,而是有了成功才创造了条件!

 
 
 

日志

 
 

如何美化日志图片效果!  

2012-07-09 20:18:53|  分类: ╉博客技巧╊ |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

如何美化日志图片效果! - BLUESWAY - 博览天下

 私人禁地之美 -私人禁地之美 -私人禁地之美 -私人禁地之美 - 私人禁地之美 -  
如何美化日志图片效果!

图片效果一:

如何美化日志图片效果! - BLUESWAY - 博览天下

图片效果二:

如何美化日志图片效果! - BLUESWAY - 博览天下

图片效果三:

如何美化日志图片效果! - BLUESWAY - 博览天下

图片效果四:

 

图片效果五:

说明:

     图片效果一为图片的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>

下面我们来看看衍变过程:

一、首先找到你所需要的图片

以上面图片效果为例,实际上下面这幅图才是我找的图片原型(见下图)

如何美化日志图片效果! - BLUESWAY - 博览天下

二、将找到的图片粘贴到日志模板中,点击日志编辑器上方的 “<> ”,会显示如下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">&nbsp;<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 编

热忱欢迎各位朋友

如何美化日志图片效果! - BLUESWAY - 博览天下

博览在线


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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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