[08/21][分享]怎样将透明相框放在图片上
<br>有时看到很漂亮的透明相框，怎样把它复盖到图片上。<br>下面介绍两种方法。
<br>
<br>
<br>素材：
<br>
<br>
<br>
<br>
<br>1.用HTML语言方法.
<br>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="337" background="http://www.xyhc.com/attachments/month_0608/DLcf_32_58701_vBtaT2p6V3fq.jpg"><tr><td width="100%" align="center"><img src="http://www.xyhc.com/attachments/month_0608/erXJ_31_io4Wc5nS4PZT.gif" width="337" height="450"></td></tr></table>
<TEXTAREA rows=7cols=100><table align="center" border="0" cellpadding="0" cellspacing="0" width="337" background="http://www.xyhc.com/attachments/month_0608/DLcf_32_58701_vBtaT2p6V3fq.jpg"><tr><td width="100%" align="center"><img src="http://www.xyhc.com/attachments/month_0608/erXJ_31_io4Wc5nS4PZT.gif" width="337" height="450"></td></tr></table></TEXTAREA> <br> <br>
<br>http://www.xyhc.com/attachments/month_0608/DLcf_32_58701_vBtaT2p6V3fq.jpg是背景图（小孩），原始尺寸337x450。
<br>
<br>这种方法缺点多多，很难做出效果，
因为表格的尺寸大于背景图的原始尺寸，背景图就会自动复制；表格的尺寸小于背景图的原始尺寸，就只会取背景图左上一部分。
<br>所以背景图原始尺寸要正好才能用，一切都被背景图的原始尺寸所困扰。
<br>CSS语言层的方法，这个方法非常实用，比HTML语言强多了，可随意将任何一件放到另一件的任何位置上，使用起来可随心所欲，千变万化。
<br>还用上面的素材:
<center>
<DIV style="position:relative; top:0px; left:0px; width:400px; height:470px;overflow: hidden">
<div style="position: absolute; top: 53px; left: 59px"><img src="http://www.xyhc.com/attachments/month_0608/DLcf_32_58701_vBtaT2p6V3fq.jpg" width=286>
</div>
<div style="position: absolute; top: 0px; left: 0px"><img src="http://www.xyhc.com/attachments/month_0608/erXJ_31_io4Wc5nS4PZT.gif" width="400" height="470">
</div>
</DIV>
</center>
<TEXTAREA rows=7cols=100><center>
<DIV style="position:relative; top:0px; left:0px; width:400px; height:470px;overflow: hidden">
<div style="position: absolute; top: 53px; left: 59px"><img src="http://www.xyhc.com/attachments/month_0608/DLcf_32_58701_vBtaT2p6V3fq.jpg" width=286>
</div>
<div style="position: absolute; top: 0px; left: 0px"><img src="http://www.xyhc.com/attachments/month_0608/erXJ_31_io4Wc5nS4PZT.gif" width="400" height="470">
</div>
</DIV>
</center></TEXTAREA> <br> <br>
解释一下这个代码；
<br><TEXTAREA rows=20cols=100>
<DIV style="position:relative; top:0px; left:0px; width:400px; height:470px;overflow: hidden">
这是CSS层的语言，定表格的宽度和高度
<div style="position: absolute; top: 53px; left: 59px"><img src="http://www.xyhc.com/attachments/month_0608/DLcf_32_58701_vBtaT2p6V3fq.jpg" width=286>
</div>
这是表格的第一层，放小孩图片，图片的尺寸（宽）应小于相框图，大于相框图中空的内宽，通过top:调整离顶距离，left:调整离左边距离。（这里的图片，也是背景图）
<div style="position: absolute; top: 0px; left: 0px"><img src="http://www.xyhc.com/attachments/month_0608/erXJ_31_io4Wc5nS4PZT.gif" width="400" height="470">
</div>
这是表格的第二层，放相框图片，尺寸和表格设定的尺寸一致。
</DIV>
这是收尾。
<center>......</center>
使该图居中。</TEXTAREA> <br> <br>
<br>(当然还可放第三层，第四层....,注意:后一层必定复盖前一层)
<br>
<br>这个代码写好后怎么调整，也是最费时间的。按以下顺序:
<br>1 定表格的宽度，跟据实际需要定。高度大概估计定，反正后面肯定要修正的。
<br>2 定图片的宽度，尽量比相框内宽大一点点，再调整离顶和离左边距离。
<br>3 最后调高度.背景图只定宽度，高度会自然配合，图片显示比例就正常了，这时如图片底露出，就加表格高度和相框高度。同理图片短了，就减表格高度和相框高度。
<br>反复修正，满意为止.<BR><P align=right><A href=http://bbs.xyhc.com/viewthread.php?tid=611052&page=1&extra=page%3D1#pid851758175><FONT size=2 color=red>*已加進教程總匯*</FONT></A></P><BR>
[ 本帖最后由 月儿 于 2006-8-21 11:20 编辑 ] 解释的很详细 学习一下 ^^ ^^ 自從學用PS制圖後, 以很久沒用這代碼了.. <BR>
重溫一下. 謝謝姐姐!! <CENTER><BR>
<DIV style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 600px; POSITION: relative; TOP: 0px; HEIGHT: 670px"><BR>
<DIV style="LEFT: 59px; POSITION: absolute; TOP: 53px"><IMG src="http://www.xyhc.com/attachments/month_0607/1_mpLQmmHW5ZDW.gif" width=286><BR></DIV><BR>
<DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px"><IMG height=470 src="http://www.xyhc.com/attachments/month_0608/erXJ_31_io4Wc5nS4PZT.gif" width=400><BR></DIV><BR></DIV><BR></CENTER>
[ 本帖最后由 不弃 于 2006-11-11 21:38 编辑 ]
页:
[1]