注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML如何给自己的图片加上精美边框图片  

2011-03-23 23:47:14|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

如何给自己的图片加上精美边框图片

 

博文简介

 

 

 

一、网上在线制作

那么大家就搜搜多的是。

 

二、用程序进行制作

用平面设计程序Photoshop等一些编辑程序制作。

简单的加动态边框点击我的博文:

轻松给照片加上GIF动画——Glitter Frame GIF Maker

效果:

1、轻松给照片加上GIF动画——Glitter Frame GIF Maker  - qy-0824 - 启野的博客

 

三、用代码进行制作

是今天所谈博文的重点。

1、给图片加边框线代码

点击博文:图片加边框代码  图片CSS滤镜—发光效果

效果:

 

 

图片加边框代码 - qy-0824 - 启野的博客

 
图片CSS滤镜—发光效果 - qy-0824 - 启野的博客

 

2、给图片加动态不透明图片边框或者透明动态图片边框

大家先看看效果是否中意你:

2011年03月20日 - qy-0824 - 启野的博客

 

一、图片加动态不透明图片边框:
HTML代码:

 

HTML代码一:背景图片加在<TD>标签内

<CENTER>
<TABLE width=背景宽度 border=0>
<TBODY>
<TR>
<TD background="背景边框图片地址" height=背景高度>
<P align=center>
<IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 385px; HEIGHT: 580px" height=图片高度 src="图片地址" width=图片宽度>
</P>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

 

HTML代码一:背景图片加在<TABLE>总标签内


<CENTER>
<TABLE width=背景宽度 background="背景边框图片地址" height=背景高度 border=0>
<TBODY>
<TR>
<TD>
<P align=center>
<IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px" height=图片高度 src="图片地址" width=图片宽度>
</P>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

备注:

从两个代码可以看出<TABLE>总标签和<TD>标签都可以做背景图片,是平铺,如果把<TABLE>总标签和<TD>标签作为主题图片的表达,通过实验则不能够成比例的表达,因为是平铺的背景图片,缩小了显示一部分,放大了重叠了。

 

HTML代码示例: 

素材:

配图素材—方形钻石背景(500×600)

如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客

如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客

 

效果:

如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客

 

HTML代码详解:
 
  • <CENTER>...</CENTER>整个表格居中属性:
    如若使整个表格居左可以去掉或加上<P align=left>...</P>
    如若使整个表格居右加上<P align=right>...</P>
  • 在<TD>标签内的居中属性<P align=center>...</P>一定要加。
    因为图片与背景边框的宽度不一定等宽,为准确的把相片放在相框的中间,避免错位而做提前准备。
  • 其实在这里是运用了一个没有边框线的表格代码:
    <TABLE width=背景宽度 background="背景边框图片地址" height=背景高度 border=0>
    <TBODY>
    <TR>
    <TD>
    文字或图片
    </TD>
    </TR>
    </TBODY>
    </TABLE>
    设置背景宽度和高度
    width=背景宽度 height=背景高度是实际我们所要带的边框图片的大小值。
    可以等比例缩小不要等比例放大。因为放大将会失去清晰度。
  • 插入图片代码:
    <IMG  height=图片高度 src="图片地址" width=图片宽度>
    图片的宽度和高度设置
    图片的高度略小于背景图片的高度,那么图片宽度比值小于背景的宽度,这样就在边框图片的内部。
  • 滤镜Alpha:
    由于是图片在前景,为了无缝链接,加上了透明滤镜Alpha,是图片更加神秘有趣。
    style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px"
    滤镜的宽度和高度与图片的宽度和高度值相同。
  • 相关滤镜的运用请点击:

    图片雾化移动特效代码 (在这个网页里加滤镜在<TABLE>标签内,最好换在插入图片代码中,好控制宽度和高度。)

    图片CSS滤镜效果—透明

    让图片产生梦幻效果的代码

    Flash圆形雾化移动特效代码

    图片CSS滤镜—波形加上半透明合成效果

    图片CSS滤镜—发光效果

 

 

二、图片加透明动态图片边框
HTML代码:

 

HTML代码一: (和上面的两个代码一样)

<CENTER>
<TABLE width=背景宽度 background="背景边框图片地址" height=背景高度 border=0>
<TBODY>
<TR>
<TD>
<P align=center>
<IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px" height=图片高度 src="图片地址" width=图片宽度>
</P>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

 

HTML代码二: (透明的相框用定位方法先贴相框,后贴相片的代码)

<TABLE id=table style="LEFT: 0px; WIDTH: 300px;POSITION: relative; TOP: 0px; HEIGHT: 300px; ridge: "background=border=0>
<TR>
<TD>
<INPUT style="LEFT: 80px; WIDTH: 200px; POSITION:absolute; TOP: 60px; HEIGHT: 200px" type=image width=200 src="图片地址">
</INPUT>
<INPUT style="LEFT: 40px; WIDTH: 300px; POSITION:absolute; TOP: 20px; HEIGHT: 300px" type=image width=300 src="相框地址"></INPUT>
</TD></TR></TABLE>

备注:网上搜索的这组代码很好,预览还在,但发表以后,不见了,所以我就想象着做了一组代码。

修改后使用的代码如下:

<TABLE id=table style="LEFT: 80px; WIDTH: 背景宽度px; POSITION: relative; TOP: 100px; HEIGHT: 背景高度px; ridge: " background=0.jpg border=0>
<TBODY>
<TR>
<TD><IMG  height=图片高度 src="图片地址" width=图片宽度>
</TD></TR></TBODY></TABLE>
<TABLE id=table style="LEFT: 40px; WIDTH: 背景宽度px; POSITION: relative; TOP: -200px; HEIGHT: 背景高度px; ridge: " background=相框地址 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>

实例代码如下:

<TABLE id=table style="LEFT: 80px; WIDTH: 300px; POSITION: relative; TOP: 100px; HEIGHT: 300px; ridge: " background=0.jpg border=0>
<TBODY>
<TR>
<TD><IMG  height=200 src="http://img617.ph.126.net/oc9b7rCMDG4pv4JphMoCjQ==/1910370666937359816.jpg" width=200>
</TD></TR></TBODY></TABLE>
<TABLE id=table style="LEFT: 40px; WIDTH: 300px; POSITION: relative; TOP: -200px; HEIGHT: 300px; ridge: " background="http://img844.ph.126.net/vgogUl8b9SdyFIK_9a3x5Q==/896779275800407029.gif" border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>

HTML代码示例: 

素材:

如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客    

 如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客

如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客

 

代码一效果:

 

如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客

 

代码二效果:

 

2011年03月23日 - qy-0824 - 启野的博客

 

 

HTML代码详解:

 

HTML代码二详解:

(网上搜索的这组代码很好,预览还在,但发表以后,不见了,但具有参考价值,我又参考做了一组供大家享用。)

未修改代码详解:
相框内径圆形、椭圆形和各种不规则图案的相框,如果先贴相框后贴相片,会把相框的圆形或花边复盖掉,无法显示相框的优美特点。调用css语法,在htnl标签行内套用相对定位和绝对定位语句,采用先贴相片后贴相框的方法,可以达到较佳的效果。但相框素材必须是内径无背景无画布空白的(透明的)。
1、表格标签设置相对定位 POSITION: relative,作为容器。
<TABLE id=table style="LEFT: 0px; WIDTH: 300px;POSITION: relative; TOP: 0px; HEIGHT: 300px; ridge: "background=border=0><TR><TD>...</TD></TR></TABLE>
2、设置绝对定位代码POSITION: absolute,先贴图片。
<INPUT style="LEFT: 80px; WIDTH: 200px; POSITION:absolute; TOP: 60px; HEIGHT: 200px" type=image width=200 src="相片地址"></INPUT>
3、设置绝对定位代码POSITION: absoluteN,在图片一面加叠相框。
<INPUT style="LEFT: 40px; WIDTH: 300px; POSITION:absolute; TOP: 20px; HEIGHT: 300px" type=image width=300 src="相框地址"></INPUT>
4、以上三条标签中都有style语句,这是套用css的标记。 
位置控制语句的理解.LEFT(水平的距离),TOP(垂直的距离)。
表格标签LEFT和TOP的启始值均设为零,作为本图框内所有插入内容位置的基准。
插入相片的位置控制,LEFT: 80px; WIDTH: 200px即距表格左边80px启200px宽。
插入相框的位置控制,LEFT: 40px; WIDTH: 300px即距表格左边40px启300px宽。
水平距离启始LEFT。数值大离左边就远,如果是负数,则溢出表格定位范围的左边。
垂直距离启始,TOP。数值大离顶边就低,如果是负数,则溢出表格定位范围的顶边。
相片加相框是否完美,在于调整位置参数。

 

修改后代码详解:
绝对路径不显示,所以我只运用两组相对相对路径的代码。

相对路径1代码
<TABLE id=table style="LEFT: 80px; WIDTH: 背景宽度px; POSITION: relative; TOP: 100px; HEIGHT: 背景高度px; ridge: " background=0.jpg border=0>
<TBODY>
<TR>
<TD><IMG  height=图片高度 src="图片地址" width=图片宽度>
</TD></TR></TBODY></TABLE>
在这组代码里我设置背景图片为background=0.jpg,让它空着或者这个代码可以去掉,把图片写在<TD>...</TD>好控制图片的宽度和高度。这组代码必须写在最前面。

相对路径2代码
<TABLE id=table style="LEFT: 40px; WIDTH: 背景宽度px; POSITION: relative; TOP: -200px; HEIGHT: 背景高度px; ridge: " background=相框地址 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>

把相框地址写在背景图片地址内,让它表现前景。这组代码在前面的代码之后。
两组代码的背景宽度和高度一样,质调节图片的宽度和高度。调节上下两组代码的水平距离LEFT: 80px:垂直距离TOP: 100px值,使其位置显示恰当正确。

 

 

三、图片加动态不透明图片边框(续):
HTML代码:

 

<TABLE width=背景宽度 background="背景边框图片地址" height=背景高度 border=0>
<TBODY>
<TR>
<TD>
<P align=center>
<IMG style="FILTER: Alpha(opacity=100,style=3); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px" height=图片高度 src="图片地址" width=图片宽度>
</P>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

 

HTML代码示例: 

素材:

如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客

如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客

 

效果:

 

如何给自己的图片加上精美边框图片 - qy-0824 - 启野的博客

 

HTML代码详解:

 

在这里只改变了滤镜的属性的样式   style=3是菱形透明效果

style="FILTER: Alpha(opacity=100,style=3); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px" 

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

详细滤镜的属性的样式参看:

图片CSS滤镜效果—透明代码

 

欢迎光临启野博客!
  评论这张
 
阅读(7380)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017