怎样把自己电脑中的图片设成blog文章的背景？--『娱乐圈→技术讨论中心』

最新留言

搜索

用户登录

博客相册

我的圈子

我的好友

友情连接

怎样把自己电脑中的图片设成blog文章的背景？

[ 2007-2-21 1:22:00 | By: 『娱乐圈→技术讨论中心』 ]

HTML语法：(红色为关键部份，不可去掉)

本文宽与本文高设定成 100% 就能延展扩大至整个网志内容....像本篇背景

＊1.只要设定背景图片位址和宽高(纯网志背景图而已)(background-color: TRANSPARENT;已省略)

<div style="WIDTH: 100%;">
<img height="图高" src="背景图片" width="图宽" align="right">
<div style="float:left;WIDTH: 100%; ">
内容
</div>
</div>

＊.最简单背景之设法(纯网志背景图而已)(连图宽都不用设) <- 4/17

<img src="背景图片" align="right">
<div style="float:left;WIDTH: 100%;">
内容
</div>

＊2.可自行设定本文宽、本文高(需使用绝对大小如px)，也可自行加线框，配合★图层框框制作附加卷轴变化教学，会有丰富效果。

HTML部分(background-color: TRANSPARENT;已省略)

<div style="WIDTH: 本文宽; HEIGHT: 本文高;">
<img height="图高" src="图片位址" width="图宽" align="right">
<div style=" WIDTH: 本文宽; HEIGHT: 本文高;">
内容
</div>
</div>

范例：

HTML：

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">内容
<br>
<br>
图片在文字下方</font>
</div>
</div>

结果：

内容

图片在文字下方
$进阶用法：

?在前景部份(上方部份)可以换成图片滤镜

范例 1(文字变透明)：

HTML：

把【background-color:TRANSPARENT;】
换成其中一种滤镜【filter:alpha(opacity=35,finishOpacity=35,style=0);】

<DIV style="WIDTH: 109px; HEIGHT: 108px"><IMG height=108 src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width=109 align=right>
<DIV style="FLOAT: left; WIDTH: 109px; HEIGHT: 108px; filter:alpha(opacity=50, finishOpacity=50,style=0)"><BR>
<b><FONT color=#ff00ff>内容 <BR><BR>图片在文字下方</FONT></b></DIV></DIV>

结果：【文字也变透明了】

内容

图片在文字下方

范例 2(图片也重叠了)：

HTML：【再把内容换成图片】

<DIV style="WIDTH: 109px; HEIGHT: 108px"><IMG height=108 src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width=109 align=right>
<DIV style="FLOAT: left; WIDTH: 109px; HEIGHT: 108px; filter:alpha(opacity=50, finishOpacity=50,style=0)">
<IMG height=108 src="http://storage.msn.com/x1plMlLh5OuvLUJCkwU76rRa6brGDcBU02OcTTQi4o59hUqkhhrPM7IRjO0QKmfhyvBdGeOTA3KwnrqmMuW1B3tMkW6TSUM-MlhBX7DCiDOt3aQnWkFSBDpug" width=109></DIV></DIV>

结果：【图片也变透明了】

?在背景部份(下方部份)也可以多加图片滤镜

范例：

HTML：背景图多加圆形滤镜

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">内容
<br>
<br>
图片在文字下方</font>
</div>
</div>

结果：

内容

图片在文字下方

＊因为只有一种方法可以实现背景图，那就是把本文浮动置左，图案浮动置右。所以也造成图片永远在右边的问题。

这里提供一个解决办法，可以让图片【永远置左】

HTML语法：(就是多加一个透明图片，一起置右，置右宽度是100%)
<div style="WIDTH: 100%; ">
<img src="透明图片" width=100% align="right"><img height="图高" src="背景图片" width="图宽" align="right">
<div style="float:left; WIDTH: 100%; ">
内容
</div>
</div>

提供一个透明图片位址: http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_7_0?1113334951.gif

这里提供一个解决办法，可以让图片"强制" 【永远置中】

嘿嘿....那就是多包一层<DIV align=center>拉...相对的要填好本文宽度

HTML语法 :

<div align=center>
<div style="WIDTH: 本文宽; ">
<img src="背景图片" width="100%" align="right">
<div style="float:left; WIDTH: 100%; ">
内容
</div></div></div>

阅读全文 | 回复(0) | 引用通告 | 编辑

标签：怎样把自己电脑中的图片设成blog文章的背景？

上一篇：博客flash代码|博客透明Flash背景代码大全
下一篇：在线动态LOGO制作

发表评论：