[08/21][分享]怎样将透明相框放在图片上

紫蝶

有时看到很漂亮的透明相框，怎样把它复盖到图片上。
下面介绍两种方法。


素材：




1.用HTML语言方法.
<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>


是背景图（小孩），原始尺寸337x450。

这种方法缺点多多，很难做出效果， 因为表格的尺寸大于背景图的原始尺寸，背景图就会自动复制；表格的尺寸小于背景图的原始尺寸，就只会取背景图左上一部分。
所以背景图原始尺寸要正好才能用，一切都被背景图的原始尺寸所困扰。
CSS语言层的方法，这个方法非常实用，比HTML语言强多了，可随意将任何一件放到另一件的任何位置上，使用起来可随心所欲，千变万化。
还用上面的素材:

<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>

解释一下这个代码；
<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> 使该图居中。


(当然还可放第三层，第四层....,注意:后一层必定复盖前一层)

这个代码写好后怎么调整，也是最费时间的。按以下顺序:
1 定表格的宽度，跟据实际需要定。高度大概估计定，反正后面肯定要修正的。
2 定图片的宽度，尽量比相框内宽大一点点，再调整离顶和离左边距离。
3 最后调高度.背景图只定宽度，高度会自然配合，图片显示比例就正常了，这时如图片底露出，就加表格高度和相框高度。同理图片短了，就减表格高度和相框高度。
反复修正，满意为止.

*已加進教程總匯*

[ 本帖最后由 月儿 于 2006-8-21 11:20 编辑 ]

绯舞

解释的很详细 学习一下 ^^

月儿

^^ 自從學用PS制圖後, 以很久沒用這代碼了..
重溫一下. 謝謝姐姐!!

不弃

[ 本帖最后由 不弃 于 2006-11-11 21:38 编辑 ]