欢迎您！启步学代码。
（17）
（原创编辑:游子。 供初学HTML代码的朋友参考）

图片加叠像框的方法


　　一张普通的jpg图片(风景、人物、鲜花等相片)，再加叠上漂亮的相框就更美丽了。相片加叠像框有各种方法： 有用软件处理的方法，也有用CSS语言层的方法，还有套用相框素材代码贴图的方法。三种方法各有优缺点，本来用CSS语言层的方法最好， 可是有些论坛不能运行。用hyml代码编辑相片加叠相框有很多模式,效果都不是十分理想。
　　通常用代码编辑相片加叠相框，须要用２－３层表格，而且要按相框原有的尺寸，大小不能调整。操作比较困难。 为了寻找一种相片加相框好办法，我试设置二种加叠法模式，提供大家参考。
　　具体的操作方法：
　　相框有两种类形，一种是相框内径空洞的，没有颜色背景，另一种是内径非空洞有颜色作底的，所以必须根据相框的类形，使用不同的加叠方法：
　　１，相框内径有颜色作底的，要先贴相框，后贴图片，相片才不会被相框复盖掉。
　　２，相框内径是圆形或花边图案的,空洞的，一定要先贴图片后加叠相框。


　　第一种模式是“相框背景加叠法”。

　　◆设置一张表格，用相框作表格的背景图片。
　　◆在这张表格的单元格内用“图片大小可调的代码”插入相片。
　　◆表格的宽和高的尺寸，要按相框原有的尺寸。
　　◆相片的宽和高大小可适当调整。
　　◆这个模式适合：相框内径方形或长方形的相框；相框内径有背底的。


　　第二种模式是“绝对定位加叠法”。

　　◆先编辑一张有控制定位的空白表格，确保相片和相框在页面的指定位置上显示。
　　◆再编辑一张有控制定位的空白表格，用于插入相片加叠相框。
　　◆插入相片加叠相框也都要有绝对定位的指令。
　　◆插入相片和相框都是用“图片大小可调整的贴图代码。
　　◆先贴相片后贴相框，适合相框内径是圆形或有花边图案的。
　　◆选择相片和相框时，两者的宽高大小基本要接近。


原创编辑者:游子。



　　“相框背景加叠法”的代码模式。



<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=540 height=360 bordercolor=0000ff background=相框图片地址 border=0>
<TR><TD>
<CENTER>
<INPUT type=image height=270 width=388 src="相片地址">
</CENTER>
</TD></TR></TABLE></CENTER>
　



原创编辑:游子。

　


原创编辑者:游子。


“相框背景加叠法”参考实例-1。

一张相框图片及其宽高大小尺寸：



http://files2.61.fm/image/3/biankuang206.JPG
530*360

一张风景图片及其地址尺寸:





http://bbs.scuec.edu.cn/attachment/Mon_0512/19_37931.jpg
388*270


“相框背景加叠法”参考实例-1的代码:



<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=530 height=360 bordercolor=0000ff background=http://files2.61.fm/image/3/biankuang206.JPG border=0>
<TR><TD>
<CENTER>
<INPUT type=image height=270 width=388 src="http://bbs.scuec.edu.cn/attachment/Mon_0512/19_37931.jpg">
</CENTER>
</TD></TR></TABLE></CENTER>
　



原创编辑:游子。

　



“相框背景加叠法”参考实例-1的效果：



原创编辑者:游子。



“相框背景加叠法”参考实例-2。


一张相框图片及其宽高大小尺寸：



http://bbs.gw.com.cn/UploadFile/2007-4/20074412244498083.gif
600*500

一张风景图片及其地址尺寸:




http://gb.cri.cn/mmsource/images/2007/03/22/nc070322007.jpg
390*455



“相框背景加叠法”参考实例-2的代码:



<CENTER>
<TABLE cellSpacing=0 cellPadding=30 width=500 height=600 bordercolor=0000ff background=http://bbs.gw.com.cn/UploadFile/2007-4/20074412244498083.gif border=0>
<TR><TD>
<CENTER>
<INPUT type=image height=458 width=388 src="http://gb.cri.cn/mmsource/images/2007/03/22/nc070322007.jpg">
</CENTER>
</TD></TR></TABLE></CENTER>
　



原创编辑:游子。

　





“相框背景加叠法”参考实例-2的效果：



原创编辑者:游子。




绝对定位加叠法的代码模式：



<TABLE id=table style=" ridge; LEFT: 0px; WIDTH: 550px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 670px" border=0>
<TR>
<TD>
<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>
<TR><TD>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 0px; HEIGHT: 400px">
<CENTER>
<INPUT src="图片地址" type=image width=480></DIV>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 0px; HEIGHT: 400px">
<INPUT src="图片地" type=image width=550>
</DIV>
</TD></TR></TABLE>
</TD></TR></TABLE>


　　【说明】

　◆这个模式有二张表格，二个贴图代码，四个都有位置控制代码。
　◆第一张表格是控制加叠图片在页面的位置．LEFT: -0px或LEFT: -220px。
　◆第二张表格是控制二张插入图片的位置，根据图片大小而定。
　◆插入图片都是用＂图片大小可调整＂的代码。
　◆要使相片和相框完美吻合，还可用空格、空行进行调整。
　◆位置控制句：
　　LEFT: 0px; WIDTH 300px 前面的参数是调整水平（左右）的位置，数值小偏左，数值大偏右。后面的参数是位置的宽度。
　　TOP: 0px; HEIGHT 400px 前面的参数是调整垂直（上下）的位置，数值小偏顶，数值大偏底，后面的参数是位置的高度。


原创编辑:游子。

　



绝对定位加叠法参考实例-1。


一张相片及其宽高大小尺寸：



http://img.gw.com.cn/UploadFile/2005/12/28/5339486.gif
310*420

一张相框图片及其宽高大小尺寸：



http://img.gw.com.cn/UploadFile/2005/6/21/2856837.gif
4500*550

相片加叠相框的代码：

<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 550px; POSITION: relative; TOP: 0px; HEIGHT: 670px" background=http://sucai.heima.com/sucai/news/bg/59.jpg border=0>
<TR>
<TD>
<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>
<TR><TD>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 0px; HEIGHT: 400px">
<CENTER>
<INPUT src="http://img.gw.com.cn/UploadFile/2005/12/28/5339486.gif" type=image width=480></DIV>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 0px; HEIGHT: 400px">
<INPUT src="http://img.gw.com.cn/UploadFile/2005/6/21/2856837.gif" type=image width=550>
</DIV>
</TD></TR></TABLE>
</TD></TR></TABLE>
　



原创编辑:游子。

　



参考实例-1相片加叠相框后的效果：




原创编辑者:游子。


绝对定位加叠法参考实例-2

一张印度美女相片及其宽度尺寸：




http://img.gw.com.cn/UploadFile/2004/12/18/2648325.jpg
400

一张相框内径圆形的图片及其宽高大小尺寸：




http://img011.photo.wangyou.com/2004/10/25/25981/200511176998990.gif
500*500


参考实例-2 相片加叠相框的代码：




<BR><BR>
<TABLE id=table style=" ridge; LEFT: 0px; ridge; WIDTH: 550px; POSITION: relative; TOP: 0px; HEIGHT: 550px" background=http://sucai.heima.com/sucai/news/bg/59.jpg border=0>
<TR>
<TD>
<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>
<TR><TD>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 550px; POSITION: absolute; TOP: 0px; HEIGHT: 400px">
<CENTER>
<INPUT src="http://img.gw.com.cn/UploadFile/2004/12/18/2648325.jpg" type=image width=400></DIV>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 0px; HEIGHT: 400px">
<INPUT src="http://img011.photo.wangyou.com/2004/10/25/25981/200511176998990.gif" type=image width=550>
</DIV>
</TD></TR></TABLE>
</TD></TR></TABLE>
<BR><BR>
　



原创编辑:游子。

　



参考实例-2 相片加叠相框的效果：




　　　　　


绝对定位加叠法参考实例-3。

一张儿童相片及其宽度尺寸：




http://img.gw.com.cn/UploadFile/2004/12/18/2648325.jpg
330*480


一张相框内径圆形的图片及其宽高大小尺寸：




http://img011.photo.wangyou.com/2004/10/25/25981/200511176998990.gif
400*520


参考实例-3 相片加叠相框的代码：



<TABLE id=table style="LEFT: 80px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 500px">
<TR>
<TD>
<br><br>
<INPUT src="http://img.gw.com.cn/UploadFile/2005/6/18/2452189.jpg" type=image width=330 height=480>
<TABLE id=table style="LEFT: -40px; WIDTH: 500px; POSITION: absolute; TOP: 0px; HEIGHT: 500px">
<TR>
<TD>
<INPUT src="http://image.10jqka.com.cn/2006/01/6/1136524753_d61e1b6195e9dcfdfb395bd29b322146.gif" type=image width=400 height=520>
</TD></TR></TABLE>
</TD></TR></TABLE>
　



原创编辑:游子。

　



参考实例-3 相片加叠相框的效果：








绝对定位加叠法参考实例-4





一张风景图片及其地址尺寸:



http://gb.cri.cn/mmsource/images/2007/03/22/nc070322018.jpg
500*460

一张相框图片及其宽高大小尺寸：


http://bbs.gw.com.cn/UploadFile/2007-4/20074412251450216.gif
500


参考实例-3 相片加叠相框的代码：



<CENTER>
<TABLE id=table style=" ridge; LEFT: 0px; WIDTH: 500px; ridge; POSITION: relative; TOP: 0px; HEIGHT: 460px" border=0>
<TR>
<TD>
<TABLE cellSpacing=3 cellPadding=3 width=500 bordercolor=0000ff background= border=1>
<TR><TD>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 500px; POSITION: absolute; TOP: 50px; HEIGHT: 500px">
<CENTER>
<INPUT src="http://gb.cri.cn/mmsource/images/2007/03/22/nc070322018.jpg" type=image width=500 HEIGHT: 460px></DIV>
<DIV id=Layer2 style="Z-INDEX: 200; LEFT: 0px; WIDTH: 500px; POSITION: absolute; TOP: 0px; HEIGHT: 420px">
<INPUT src="http://bbs.gw.com.cn/UploadFile/2007-4/20074412251450216.gif" type=image width=500>
</DIV>
</TD></TR></TABLE></TD></TR></TABLE>
</CENTER>
　



原创编辑:游子。

　




参考实例-3 相片加叠相框的效果：






编辑：游子
（待续）

（为了让更多网友学用html代码贴图制作网页，本贴 欢迎转载，但是，转载时请不要把原创编辑游子的名字改掉。谢谢！）