carol 的个人资料※番茄的副站※照片日志 工具 帮助
2005/4/19

高级教程——添加背景图片

效果一展示


 从我们相遇那一刻起
我的心就如同绽开的花朵一样缤纷美丽
在夹杂着花瓣的风中感受心中心中的甜蜜

代码:
<DIV align=center>
<DIV style="WIDTH: 350px"><IMG style="
FILTER: alpha(opacity=100, finishOpacity=0,style=2)
; WIDTH: 483px; HEIGHT: 548px" height=582 src="图片地址" width=394 align=right>
<DIV style="FLOAT: left; WIDTH: 100%" align=left>
<P align=left>日志文字</P>

红色部分为效果代码,可用下面的相应语句替换!

柔边效果-均勻 :
filter:alpha(opacity=25, finishOpacity=25,style=0) 
柔边效果-线狀(左往右) : 
filter:alpha(opacity=0, finishOpacity=100,style=1) 
柔边效果-圓形(外往中央):
filter:alpha(opacity=100, finishOpacity=0,style=2) 
柔边效果-圓形(中央往外):
filter:alpha(opacity=100, finishOpacity=0,style=3) 
诙谐效果 :
<img src="图片地址" style="filter: gray"> 
X光效果 :
<img src="图片地址" style="filter: Xray"> 
色彩对换 :
<img src="图片地址" style="filter:invert"> 
左右翻转 :
<img src="图片地址" style="filter:FlipH()"> 
上下翻转 :
<img src="图片地址" style="filter:FlipV()">
发光效果 :
<div style="width: 134px; height: 140px;filter:glow(color=#ffffff, strength=6)"><img src="图片地址" ></div> 
附阴影效果 :
<div style="width: 134px; height: 140px;filter:shadow(color:#333333,direction=150);"><img src="图片地址" ></div> 
投射阴影效果 :
<DIV style="FILTER: Dropshadow(color:#333333,direction=150,offX=5,offY=5); WIDTH: 134px; HEIGHT: 140px"><img src="图片地址" ></div> 
波形效果 :
<DIV style="FILTER: Wave(strength=5,lightstrengh=5); WIDTH: 134px; HEIGHT: 140px"><img src="图片地址" ></div> 
模糊效果 :
<DIV style="FILTER:Blur(direction=150); WIDTH: 134px; HEIGHT: 140px"><img src="图片地址"></div>


效果二展示

不过,如果你的背景图片不需要加效果的话,建议用表格背景语句更为简便,灵活,先看一下效果:

 


日志文字
日志文字日志文字
日志文字日志文字日志文字
日志文字日志文字日志文字日志文字

代码:

<TABLE border=1>
<TBODY>
<TR>
<TH background=图片URL地址>日志文字</TH></TD></TR></TBODY></TABLE>

PS: border控制边框宽度

评论 (7)

请稍候...
很抱歉,您输入的评论太长。请缩短您的评论。
您没有输入任何内容,请重试。
很抱歉,我们当前无法添加您的评论。请稍后重试。
若要添加评论,需要您的家长授予您相应权限。请求权限
您的家长禁用了评论功能。
很抱歉,我们当前无法删除您的评论。请稍后重试。
您已超过了一天之内允许提供的评论数上限。请在 24 小时后重试。
因为我们的系统表明您可能在向其他用户提供垃圾评论,您的帐户已禁用了评论功能。如果您认为我们错误地禁用了您的帐户,请联系 Windows Live 支持部门
完成下面的安全检查,您提供评论的过程才能完成。
您在安全检查中键入的字符必须与图片或音频中的字符一致。

若要添加评论,请使用您的 Windows Live ID 登录(如果您使用过 Hotmail、Messenger 或 Xbox LIVE,您就拥有 Windows Live ID)。登录


还没有 Windows Live ID 吗?请注册

山木发表:
谢啦!高手。
 
6 月 16 日
匿名 的图片
☜♥尐鎺錝♥☞ 发表:
谢谢~~~
12 月 26 日
匿名 的图片
童话丸丸 发表:
我很笨乃....这个代码不能直接copy用的么?~
9 月 29 日
匿名 的图片
royal2004sandrahoo 发表:
zan~
9 月 17 日
匿名 的图片
ClayishStory 发表:
你的东西真是让我打开眼界啊,谢谢
7 月 25 日
匿名 的图片
audreygreen 发表:
真是受益匪浅啊,感谢番茄的提供的资源!
7 月 21 日
匿名 的图片
。。。蔚兰。。。 发表:
谢了,有了你的东东,让偶的网站美丽了许多。。。
6 月 3 日

引用通告

此日志的引用通告 URL 是:
http://carbenda.spaces.live.com/blog/cns!99EB392FABD17A7E!166.trak
引用此项的网络日志