個人檔案hgb513相片部落格清單更多 工具 說明
15 June

MSN Spaces 使用技巧26——添加背景图片

MSN Spaces添加背景图片

 

      在日志中添加背景图片可以更好的美化自己的日志,在这里要感谢羽菲工作室提供的代码,他的技术也很高明哦!

代码1:

<DIV style="WIDTH: 图宽; HEIGHT: 图高">
<P align=center><STRONG><IMG style="FILTER: alpha(opacity=60, finishOpacity=0,style=3); WIDTH: 图宽; HEIGHT: 图高" src="图片地址" width="图宽" align=right></STRONG></< font>P>
<DIV style="FLOAT: left; WIDTH: 图宽; HEIGHT: 图高; BACKGROUND-COLOR: transparent" align=center>
<P align=center>文本</div></div>

具体解释如下:

      第一,你先要编辑你的日志,也就是文字部分,可以任意添加文字的特效,也可以文字中穿插图片,先编辑好!然后把它的HTML代码复制到记事本里,以免编辑错误丢失文本。然后将<DIV style="WIDTH: 图宽; HEIGHT: 图高">这个命令添加在文字的前面,图宽和图高部分编辑成文字框的宽和高,然后把两个数值记住!然后去掉<DIV style="WIDTH: 图宽; HEIGHT: 图高">命令。

图宽、图高参考值:

      第二,把背景编辑命令添加到编辑的最前面,和添加其他文字特效一样,要把图片地址添加进去,然后把刚才记住的那两个数值填好,浏览一下,没有什么错误,就可以发布了!

注意:style="FILTER: alpha(opacity=60, finishOpacity=0,style=3)这个语句是编辑图片的特效的,opacity是图片的透明性,finishOpacity是最终不透明性(修改的作用不是很大),style是图片的风格。

代码2:

<div style="WIDTH: 100%; HEIGHT: 100%;">
<img height="图高" src="图片地址" width="图宽" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 100%; HEIGHT: 100%;">
內容</div></div>

代码3:

<IMG src="背景图片链接地址" width=图片宽度值 height=图片高度值 align=right style="FILTER: alpha(opacity=100, finishOpacity=0,style=2) ">
<DIV style="FILTER: alpha(opacity=45, finishOpacity=45,style=0); FLOAT: left; WIDTH: 文本宽度值">
<DIV style="LINE-HEIGHT: 行间距值(pt); LETTER-SPACING: 字符间距值(em)">
<P><FONT color=#ffffff size=2>你的日志文字</FONT></P>
</DIV></DIV>

语法含义

<IMG src=…….>控制日志中的背景图片,图片的宽度及高度值均以px为单位;align这一参数控制图片位置,但不要对此进行更改,否则无法实现文字浮于图片之上的效果。Filter控制背景图片的柔化滤镜,大家可以修改其中的数值已达到不同的效果,但注意style的值只能取1,2,3这三个数值。除了柔化效果外,还有翻转、发光、阴影等若干特效,但语法表述各有不同,在此不再赘述,有兴趣的朋友可以在互联网上查询相关语法。在Space空间不同的布局方式下,日志宽度是不相同的,所以为了更好的配合日志的页面效果,建议选择合适宽度的图片,具体可根据布局的实际情况(即日志的宽窄程度)将图片宽度分别设定在260px、350px、370px、550px、730px左右的近似值。

<DIV style="FILTER…….>控制日志文字的若干效果,其中Filter命令的使用方法与前述一致,也是调节柔化效果。文本宽度也采取px为单位,其最大值也要参照上面不同布局方式时所要求的近似宽度值,如果你希望文字完全分布在整个日志页面上,那么将WIDTH值设为100%即可。在设定了具体宽度的情况下Float命令可以省略,否则请予以保留。

有一个问题需要注意,预览中文字相对于背景图片的位置往往与最终显示在日志中的位置不一样,这还需要你返回到该日志进行进一步的修改,这确实需要一些耐心,但相信经过一段时间的实际应用,你会总结出一些经验技巧的。

动态背景:

实现动态的背景画面其实很简单,只需要把GIF格式的动画文件作为背景图片就可以了,不过实际使用中有一点需要注意,就是当你在含有动态背景的页面上点击任何一个下拉展开式链接时(例如"评论"),动画就会停止,代之以静态的画面,除非将当前页面进行刷新。

回應 (9)

請稍候...
很抱歉,您輸入的回應過長。請縮短您的回應。
您尚未輸入內容,請再試一次。
很抱歉,目前無法新增您的回應,請稍後再試。
若要新增回應,您的父母必須先給您權限。要求權限
您的家長已關閉回應功能。
很抱歉,目前無法刪除您的回應,請稍後再試。
您已超過每日回應上限次數,請於 24 小時後再試一次。
由於系統顯示您可能傳送垃圾郵件給其他使用者,因此您帳號中的回應功能已遭停用。 如果您認為自己帳號遭錯誤停用,請連絡 Windows Live 支援
請完成下列安全檢查,以完成回應。
您輸入的安全檢查字元必須與圖片或音訊中的字元相符。

若要新增回應,請以您的 Windows Live ID 登入 (若您使用 Hotmail、Messenger 或 Xbox LIVE,則您已擁有 Windows Live ID)。登入


沒有 Windows Live ID?註冊

撰寫:
研究研究
2 月 21 日
G调F和弦撰寫:
呵呵,好心人谢谢呀!虽然看的有点晕,不过我回去试试呵呵,谢谢!
2 月 19 日
匿名 的圖片
狸猫能换了太子?~ 撰寫:
怎么才能不让那几个代码显示出来呀?
1 月 12 日
匿名 的圖片
城市鬼魅 撰寫:
郁闷啊..... 不理解 楼上说得是啊 最好有个图解什么的
1 月 11 日
匿名 的圖片
Awarded我就是我 撰寫:
抄下了
谢谢
12 月 28 日
匿名 的圖片
hugb 撰寫:
sorry,我这也是先copy下来的,准备慢慢的研究的,(前面有引用说明),我也只是用了"一点点"
10 月 13 日
匿名 的圖片
lalafengzi 撰寫:
真的难懂,不过看起来很有用.
最好能有个例子,用图表代替文字说明.
总之谢谢!
10 月 10 日
匿名 的圖片
黄鱼干 撰寫:
我没看明白,这怎么用的啊?教我啊大哥!
9 月 8 日
匿名 的圖片
dan_hua 撰寫:
很好的帮助
欢迎到我的space睬上几脚
7 月 30 日

引用通告

此內容的引用通告是:
http://hugb513.spaces.live.com/blog/cns!4F4BAB48302168CB!257.trak
引述這則內容的部落格