加载中…
文字与图片的合理排版及图片滤镜效果(收集整理版)
(2006-01-17 10:59:16)| 分类： 美化博客小技巧 |
1、左图右字
注：heiht width 是图片的高和宽。若，字左图右，只需把left改为right.
2、日记背景图片制作
align=right><DIV style="FLOAT: left; WIDTH: 473px">前景文字</DIV></DIV>
注：
“src=http://......”是背景图片的URL地址，
“height=225”是指定背景图片的高度（不更改背景图片高度可删除此代码），
“width=300”是指定背景图片的宽度（不更改背景图片宽度可删除此代码）。
“align=right”是指定背景图片的水平对齐方式。可更改等号后面参数：right—靠右；left—靠左；center—居中。
“style="FLOAT: left; WIDTH: 473px"”指定前景文字框的水平对齐方式和宽度。
“style=2”背景图片滤镜样式，可更改等号后面参数： 0—均匀；1—线状；2—圆形；3—长方形。
“opacity=95”指定背景图片起始透明度，有效范围是“0~100”
“finishOpacity=10”指定背景图片结束透明度，有效范围是“0~100”
3、图片滤镜效果
代码一：
柔化
<img src="图片地址.jpg" style="filter:alpha(opacity=25, finishOpacity=25,style=0)">
http://www.yleilei.com/diary/diary/BookOrder_img.jpg
代码二：
柔边(左往右) :
<img src="图片地址.jpg" style="filter:alpha(opacity=0, finishOpacity=100,style=1)">
http://www.yleilei.com/diary/diary/BookOrder_img.jpg
代码三：
圆形柔化(外往中央):
<img src="图片地址.jpg" style="filter:alpha(opacity=100, finishOpacity=0,style=2)">
代码四：
灰色效果 :
<img src="图片地址.jpg" style="filter: gray">
灰色效果 : http://www.yleilei.com/diary/diary/BookOrder_img.jpg
代码五：
左右翻轉 :
<img src="图片地址.jpg" style="filter:FlipH()">
左右翻轉 : http://www.yleilei.com/diary/diary/BookOrder_img.jpg
代码六：
发光效果 :
<div style="width: 220px; height: 214px;filter:glow(color=#ffffff, strength=6)"><img src="图片地址.jpg" ></div>
代码八
投射阴影效果
<DIV style="FILTER: Shadow(color=#4A7AC9,direction=135); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="图片地址"></DIV>
代码九：
水波纹效果
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="图片地址"></DIV>
代码十：半透明波形
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><img src="图片地址" style="filter:Alpha(opacity=100,finishOpacity=0,style=2)"></DIV>
喜欢
0
赠金笔