[04/17]做透明相框的方法






用代码做透明相框

用代码做透明相框，觉得效果还可以，

效果：

代码：

<DIV style="position:relative; top:0px; left:0px; width:490px; height:370px;overflow: hidden">
<div style="position: absolute; top: 0px; left: 0px"><img src="http://gaoss33.aa.topzj.com/attachments/m75//76/94/76945/forumid_11871/t5_0Ov4tsfRquHB.gif" width=490 height=370>
</div>
<div style="position: absolute; top: 0px; left: 0px"><table width="490" height="370" border="23" cellspacing="0" style="filter: Alpha(Opacity=43,Style=0)"><tr><td width=100% align="center"></td></tr></table>
</div>
</DIV>

第二层实际上就是一个简单的颜色框：



<table width="490" height="370" border="23" cellspacing="0" ><tr><td width=100% align="center"></td></tr></table>

把黄色代码放进去，就变成透明了：



<table width="490" height="370" border="23" cellspacing="0" style="filter: Alpha(Opacity=43,Style=0)"><tr><td width=100% align="center"></td></tr></table>

解释一下这个黄色代码：
style="filter: Alpha(Opacity=43,Style=0)"
Alpha它是CSS滤镜中的专门用来设置透明度的滤镜（在我24页，472楼有详细）
参数Opacity:设置不透明度,它的值用百分比表示,从0到100,0-完全透明,100-完全不透明.
参数Style=0在这里不能改动。

也可将图片透明，如将透明相框图（这个透明指中空）：



透明处理后效果：




代码：

<img src="http://bbs.e-yu.cn/attachments/ext_gif/C4w1_10.gif" style="filter: Alpha(Opacity=33,Style=0)">

也可将它复盖到图片上：

代码：

<DIV style="position:relative; top:0px; left:0px; width:490px; height:370px;overflow: hidden">
<div style="position: absolute; top: 0px; left: 0px"><img src="http://adu.bbs.topzj.com/attachments//10/96/1096/14UVB_ZgxCACGfndOl.jpg" width=490 height=370>
</div>
<div style="position: absolute; top: 0px; left: 0px"><img src="http://bbs.e-yu.cn/attachments/ext_gif/C4w1_10.gif" style="filter: Alpha(Opacity=33,Style=0)" width="490" height="370">
</div>
</DIV>

大家凭想象力将透明的图片和背景图有机地结合起来,有时会有意想不到的效果.

冬 天

为了加强立体感，也可将框的向阳设白色，背阳为黑色：



<table width="490" height="370" border="23" bordercolordark=#000000 bordercolorlight=#ffffff cellspacing="0" ><tr><td width=100% align="center"></td></tr></table>

加透明度后：



<table width="490" height="370" border="23" bordercolordark=#000000 bordercolorlight=#ffffff cellspacing="0" style="filter: Alpha(Opacity=23,Style=0)"><tr><td width=100% align="center"></td></tr></table>

复盖到图片上效果：

代码：

<DIV style="position:relative; top:0px; left:0px; width:490px; height:370px;overflow: hidden">
<div style="position: absolute; top: 0px; left: 0px"><img src="http://ccd.zjonline.com.cn/images/mrfg/xt006.jpg" width=490 height=370>
</div>
<div style="position: absolute; top: 0px; left: 0px"><table width="490" height="370" border="33" bordercolordark=#000000 bordercolorlight=#ffffff cellspacing="0" style="filter: Alpha(Opacity=23,Style=0)"><tr><td width=100% align="center"></td></tr></table>
</div>
</DIV>

不错的东西啊.支持一下!

呵呵.还不错.顶你一下

这么好的帖子不顶不行!