启野的博客

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

日志

关于我

启野

B型天秤座

文章分类

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

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

下载LOFTER 我的照片书 |

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

博文简介

一、网上在线制作

那么大家就搜搜多的是。

二、用程序进行制作

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

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

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

效果：

三、用代码进行制作

是今天所谈博文的重点。

1、给图片加边框线代码

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

效果：

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

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

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

一、图片加动态不透明图片边框：

HTML代码：

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

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

备注：

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

HTML代码示例：

素材：

配图素材—方形钻石背景（500×600）

如何给自己的图片加上精美边框图片 - 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代码一：（和上面的两个代码一样）

HTML代码二：（透明的相框用定位方法先贴相框，后贴相片的代码）

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

修改后使用的代码如下：

<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 - 启野的博客

代码二效果：

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代码：

HTML代码示例：

素材：

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

效果：

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

HTML代码详解：

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

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

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

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

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

欢迎光临启野博客！

评论这张

转发至微博

阅读(12654)| 评论(1)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_094075086085089069084081086095083084084067083083082065',
              blogTitle:'HTML如何给自己的图片加上精美边框图片',
              blogAbstract:'   <TABLE border=\"6\" cellSpacing=\"3\" borderColor=\"#003333\" cellPadding=\"0\" width=\"100%\"  align=\"center\" height=\"211\" \>  <TBODY\>  <TR\>  <TD\>  <TABLE border=\"1\" cellSpacing=\"5\" borderColor=\"#003333\" cellPadding=\"0\" width=\"100%\"  align=\"center\" height=\"211\" \>  <TBODY\>  <TR\>  <TD height=\"184\" vAlign=\"top\" \><WBR\>    <DIV align=\"center\" \>  <P style=\"FILTER: Shadow(color=#FF0000,strength=60,direction=135); WIDTH: 679px; HEIGHT: 80.737pt; COLOR: #ffffff; FONT-SIZE: 30pt;\"  FONT\>如何给自己的图片加上精美边框图片</P\></DIV\></TD\></TR\>  <TR\>  <TD style=\"FILTER: Blur(Add=true, Direction=180, Strength=20);\"  bgColor=\"#003333\" height=\"27\" \>  <P align=\"center\" \><FONT color=\"#ccffff\" \></FONT\> </P\>  <P align=\"center\" \><FONT color=\"#ccffff\" size=\"5\" \>博文简介</FONT\></P\>  <P align=\"center\" \><FONT color=\"#ccffff\" \></FONT\></P\></TD\></TR\></TABLE\></TD\></TR\></TABLE\>',
              blogTag:'html',
              blogUrl:'blog/static/72507542201122010425305',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1328983606673,
              publishTime:1300895234521,
              permalink:'blog/static/72507542201122010425305',
              commentCount:1,
              mainCommentCount:1,
              recommendCount:1,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'B型天秤座',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/72507542201122010425305">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

启野的博客

导航

日志

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

历史上的今天

最近读者

热度

评论

页脚