当前位置： | 博客代码网>博客代码> >> 浏览文章

引用美化图片大全飘在天边的云

来源:└博友窝编辑:博客代码网发布时间:2007-03-25 点击: [收藏]

美化图片大全

1、单边框

<center><img

src="/upimgback/allimg/070325/1516090.jpg" style="border:3 solid #ff0000"></center> 　

2、双边框

<center><img

src="/upimgback/allimg/070325/1516090.jpg" style="border:5 double green"></center>

3、立体镜框（一）

<center><img src=/upimgback/allimg/070325/1516090.jpg

style="border:25 outset #ff88ff"></center>

4、立体镜框（二）

<center><img

src="/upimgback/allimg/070325/1516090.jpg" style="border:25 inset #ff88ff"></center>

5、虚线框

<center> <img src="/upimgback/allimg/070325/1516090.jpg" style="border:4 dashed #ff0000"></center>

6、凹槽框

<center> <img src="/upimgback/allimg/070325/1516090.jpg" style="border:25 groove green" border="0"></center>

7、脊状框

<center> <img src="/upimgback/allimg/070325/1516090.jpg" style="border:25 ridge green" border="0"></center>

8、横向渐变透明

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)">

9、圆形渐变透明

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"></center>

10、X形渐变透明

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"></center>

11、黑白效果

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter:'gray'"></center>

12、X光效果（底片）

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter:'xray'"></center>

13、浮雕效果

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()"></center>

14、上下颠倒

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter:flipv">

15、左右颠倒

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter:invert"></center>

16、色彩颠倒

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter:fliph"></center>

17、粒状阴影

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=15)"></center>

28、模糊效果

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3)"></center>

19、水波效果（风吹）

<center><img src="/upimgback/allimg/070325/1516090.jpg" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>

20、水中倒影效果

<center><IMG src="/upimgback/allimg/070325/1516090.jpg" width="200" height="150"><BR>
<IMG src="/upimgback/allimg/070325/1516090.jpg" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" width="200" height="150"></center>

21、图片具有超连接

<P align=center><A href="http://www.sina.com.cn/m/ziguangge" target=_blank><IMG style="WIDTH: 180px; HEIGHT: 210px" height=449 src="/upimgback/allimg/070325/1516090.jpg" width=325></A></P>

22、左右滚动的图片

<MARQUEE scrollAmount=2 scrollDelay=0 behavior=alternate width=200 height=180><IMG height=200 src="/upimgback/allimg/070325/1516090.jpg" width=180 border=0> <IMG height=200 src="/upimgback/allimg/070325/1516090.jpg" width=180 border=0> <IMG height=200 src="/upimgback/allimg/070325/1516090.jpg" width=180 border=0> <IMG height=200 src="/upimgback/allimg/070325/1516090.jpg" width=200 border=0></MARQUEE>

23、向各个方向滚动的图片

<MARQUEE scrollAmount=1 scrollDelay=60 direction=right width=160 height=200 >
<IMG height=200 src="/upimgback/allimg/070325/1516090.jpg" width=180 border=0>
<IMG height=200 src="/upimgback/allimg/070325/1516090.jpg" width=180 border=0>
<IMG height=200 src="/upimgback/allimg/070325/1516090.jpg" width=180 border=0>
</A></MARQUEE>

代码中可以修改的地方
direction=right 是移动的方向
上：up 下：down 左：right 右：left
scrollamount=5 是向下移动速度，可以调整，一般设置在1---15的范围内比较好.

图片精美边框特效代码

1.单线框

<center><img src="/upimgback/allimg/070325/15160929.jpg" style="border:3 solid #ff0000"><br><br><br></center>

2.双线框
<center>
<img src="/upimgback/allimg/070325/15160929.jpg" style="border:5 double green"><br><br><br></center>

3.凸出框

<center>
<img src="/upimgback/allimg/070325/15160929.jpg"style="border:25 outset #ff88ff"><br><br><br></center>

4.凹进框 <center> <img src="/upimgback/allimg/070325/15160929.jpg" style="border:25 inset #ff88ff"><br></center>
5.邮票框一.

<center>
<table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56"><tr><td bgcolor="#aeffae" width=600 height=450 align=center valign=middle><img src="/upimgback/allimg/070325/15160929.jpg"></td></tr></table></center>

邮票框二.

<CENTER>
<TABLE style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; BORDER-BOTTOM: #f6ae56 3px dashed" cellSpacing=5 cellPadding=0 bgColor=#f6ae56>
<TBODY>
<TR>
<TD vAlign=center align=middle width=600 bgColor=#aeffae height=450>
<P align=left><IMG src="/upimgback/allimg/070325/15160929.jpg"></P></TD></TR></TBODY></TABLE></CENTER>

6.虚线框

<CENTER><IMG style="BORDER-RIGHT: #ff0000 4px dashed; BORDER-TOP: #ff0000 4px dashed; BORDER-LEFT: #ff0000 4px dashed; BORDER-BOTTOM: #ff0000 4px dashed" src="/upimgback/allimg/070325/15160929.jpg"><BR><BR><BR></CENTER>

7.凹槽框 <center>
<img src="/upimgback/allimg/070325/15160929.jpg" style="border:25 groove green" border="0"><br><br><br></center>

8.脊状框 <center>
<img src="/upimgback/allimg/070325/15160929.jpg" style="border:25 ridge green" border="0"><br><br><br></center>

9.立体阴影框

<center>
<table width=400 height=400 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)">
<tr><td bgcolor="#ffffff" align=center valign=middle><img src="/upimgback/allimg/070325/15160929.jpg"></td></tr></table></center>
10.阴影框
<center><img src="/upimgback/allimg/070325/15160929.jpg" style="filter:shadow(color=#32cd32)"></center>
11.横向渐变透明
<center><img src="/upimgback/allimg/070325/15160929.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)">

12.圆形渐变透明
<center><img src="/upimgback/allimg/070325/15160929.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"></center>
13.X形渐变透明
<center><img src="/upimgback/allimg/070325/15160929.jpgg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"></center>
14.改变某种颜色

<center><img src="/upimgback/allimg/070325/15160929.jpg"style="FILTER: Chroma(Color=RED)"></center>

15.上下颠倒
<center><img src="/upimgback/allimg/070325/15160929.jpg" style="filter:flipv">
16.左右颠倒

<center><img src="/upimgback/allimg/070325/15160929.jpg" style="filter:fliph"></center>

17.粒状阴影

<center><img src="/upimgback/allimg/070325/15160929.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)"></center>

18.水波效果（风吹）

<center><img src="/upimgback/allimg/070325/15160929.jpg" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>

图片的滤镜效果

准备:插入图片后进入"代码"模式,找到插入的图片代码域,对其进行修改.

找到相应的代码.为:

1.透明效果

格式:

或

涉及到的属性:修改数值对应即可

opacity:开始处的透明度

finishOpacity:结束处的透明度

style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明

2.翻转效果

左右翻转格式:

或

上下翻转格式:

或

3.变调效果

灰调格式:

或

X光效果:

或

色彩对换:

或

4.边框效果(来自小缘人)

发光:(color为发光颜色代码,strength是发光强度,滤镜宽=图宽发光强度x2

滤镜高=图高发光强度x2 10)

投影:(color为发光颜色代码,direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽 25)

濾鏡高=图高40)

阴影:(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽水平位移绝对值 10,滤镜高=图高垂直位移绝对值 20)

模糊:(direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽 15,濾鏡高=图高 30)

波形:(freq频率(>0)strength振幅强度(>0)lightstrength波峰强度(0~100愈高越黑)phase起始相位(0~100),滤镜宽=图宽振幅强度x2

滤镜高=图高振幅强度x2 10)

表格的嵌套格式和图片美化

边框对于一个表格的美化很重要，这里通过基本的表格代码，再深入讲解表格的嵌套，以及表格的美等问题，为发表音乐贴打好基础。

一、边框表格的基本语法

先来看一个简单的边框：

代码：

<table width="360" height="250" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#f0ffff" bordercolor=#c3c3c3><tr><td>博客秘籍(小强版)</td></tr></table>

效果:

博客秘籍(小强版)

在这段代码里的<table.........><tr><td>博客秘籍(小强版)<*/td><*/tr><*/table>就组成边框表格的基本语法:开始标签,内容,结束标签.这三个标记<table><tr><td>是定义表格的最重要的标记，可以说学懂这三个就足己制作一个边框表格了.

先看懂这个代码:

table:这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里.

tr:描述列的元素,列就是从上到下的行.

td:描述格的元素,格就是每行里的格(大概意思).

table的属性常用的有:

width= 表格宽度，接受绝对值（如180）及相对值（如 80%,相对可显示的宽度）

height= 表格高度，接受绝对值（如 180）

border= 表格框的厚度.

cellspacing= 表格格线离边框距离

cellpadding= 文字图片离格线的距离.

align= 表格的摆放位置（水平），可选值为： left, right,center(左，右，中心)

valign= 表格内字画等的摆放贴位置（垂直）可选值为： top, middle, bottom。(顶，中间，底部 ) background= 表格的背景图，与 bgcolor 不要同用。 bgcolor= 表格背景颜色，与background 不要同用. bordercolor= 表格边框颜色. bordercolorlight= 表格边框向光部分的颜色. bordercolordark= 表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效)

二、边框的制作

1.颜色框: 简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height 就会显示一个你所指定的颜色框.

据此写一个代码:

<table bordercolor=#c3c3c3 border=8 align=center width=360 height=250 cellspacing=0><tr><td>博客秘籍(小强版)</td></tr></table>

显示效果为：

博客秘籍(小强版)

这里多写了一个格线属性cellspacing=0,格线就是上面第一个边框里的那根细线(打表格用的)，不写格线属性浏览器就默认为1.我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的. 下面是不写的效果:

博客秘籍(小强版)

那么有的新手会问：为什么我已经定好尺寸的框仍会被图片撑大？其实这是因为框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.

例如还是上面那个尺寸的框,放进一张大的图片:

代码:

<table align=center bordercolor=#0000ff border=8 width=360 height=250 cellspacing=0><tr><td><img src=/upimgback/allimg/070325/15160967.jpg width=450></td></tr></table>

显示效果为：

以上的效果提示我们要注意两点:

1）有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大.

2）因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.

三、素材框:

利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果. 边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里. 要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大.

下面是已经选好的两张素材图.

用第一张做背景图:

代码:

<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="/upimgback/allimg/070325/15160969.jpg">

<tr><td>博客秘籍(小强版)</td></tr></table>

效果如下：

博客秘籍(小强版)

应用注意点：代码中设了格线cellspacing="10",这在下一张背景图放进去后才能看到, 表格宽用了相对值90%,相对可显叶面的90%. 下面把第二张做背景图,将格线设为5,width="100%".

将代码

<table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://www.zhulintingyu.com/non-cgi/usr/60/60_52_5.jpg">

<tr><td>博客秘籍(小强版)</td></tr></table>

放到前一张里的如下代码:

<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="/upimgback/allimg/070325/15160969.jpg">

<tr><td><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="/upimgback/allimg/070325/15160970.jpg">

<tr><td>博客秘籍(小强版)</td></tr></table></td></tr></table>

效果如下：

博客秘籍小强版

现在加一张图片，看看整体效果如何：

看看这两层边框的代码：

<TABLE cellSpacing=10 cellPadding=0 align=center background=/upimgback/allimg/070325/15160969.jpg border=0>
<TBODY><TR><TD>
<TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=/upimgback/allimg/070325/15160970.jpg border=0>
<TBODY><TR><TD>

<IMG src=/upimgback/allimg/070325/15160967.jpg width=450 twffan="done"></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

看懂这些代码的意思了吗？其实最重要的还是应该做到前面有几个开始标签，结束就必须有收尾标签。

音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾。使得整个帖变形. 所以,做了几个表格,就必须有几组收尾标签,多一个少一个都不行.（即：多少<td><tr><table>对应多少</td></tr></table>）。

四、图和文字放进框里的方法及注意点

代码格式：<table ......><tr><td>内容</td></tr></table>

将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里. 代码安放的一些注意点:

1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高. 凡是要空行的地方可用换行标签<br>来设定,不够可以多加几个<*br>,到满意为止, 也可用分段标签<P>......</P>,不够再加<br>

2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边. 再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点. 图片宽度好设定,文字一般也用<br>分行的方法来限定它的宽度。

3.内容居中:将位置属性align=center放到最后一层表格的<td>标签里,框里的内容就会都居中了，代码格式：<table ......><tr><td align=center>内容</td></tr></table>

文章地址：

上一篇：博客美化大全黑域神话下一篇：引用美化图片大全菜鸟标准像

└博友窝=本类=排行

1周排行
1月排行
总排行

*引用* 美化图片大全 飘在天边的云

引用美化图片大全飘在天边的云