博客留言贴图新技巧

昵称9708896 2014-01-05

展开全文

网易博客留言贴图新技巧（二）

翻转效果

实例05代码

<div title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_2.jpg); WIDTH: 400px; HEIGHT: 218px"></div>

<div title="<0>"style="FILTER: FlipH; BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_3.jpg); WIDTH: 400px; HEIGHT: 218px"></div>

实例05效果

（原图）

(新图)

水平翻转： <div title="<0>"style="FILTER: FlipH; BACKGROUND-IMAGE: url(图片地址); WIDTH: 宽度px; HEIGHT: 高度px"></div>

垂直翻转： <div title="<0>"style="FILTER: Flipv; BACKGROUND-IMAGE: url(图片地址); WIDTH: 宽度px; HEIGHT: 高度px"></div>

倒影效果

实例06代码

<div title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_4.jpg);WIDTH: 400px; HEIGHT: 220px"></div>
<div title="<0>"style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv();BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_4.jpg);WIDTH: 400px; HEIGHT: 180px"></div>

实例06效果

去色效果

实例07代码

<P title="<0>"style="FILTER: gray; BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_4.jpg);WIDTH: 400px; HEIGHT: 220px"></P>

实例07效果

叠加效果

实例08代码

叠加一张图： <div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_5.jpg); WIDTH: 400px; HEIGHT: 290px"><BR><BR>
<div align=left>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_6.jpg); WIDTH: 300px; HEIGHT: 60px"></div></div></div>

实例08效果

实例09代码

叠加两张图： <div title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_5.jpg); WIDTH: 400px; HEIGHT: 290px"><BR>
<div align=left>
<div title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_6.jpg); WIDTH: 300px; HEIGHT: 60px"></div><BR><BR><BR>
<div align=center>
<div title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029136_7.jpg); WIDTH: 380px; HEIGHT: 141px"></div></div></div></div>

实例09效果

提醒：目前，留言所用的图片还不能添加移动效果、连接效果。

特别提醒：

从本月27日开始，网易已禁止在留言栏发图，因此本文中的代码在留言栏

中不能再用了，但用在其它地方还是可以的。谢谢大家对本博客的支持！

---2009.5.29

网易博客留言贴图新技巧（一）

       近期，网易对留言栏的功能进行了限制，原来一些常用的代码和方法，现在大多数都不能再用了。为了扭转这种局面，不少网友勤于实践，勇于创新，探索出很多能用的代码和新的方法。最近，本人也发现了贴图的一些小技巧，所用的代码简短、方法简单，尽量不用或少用表格代码，也能达到较好贴图效果。现将本人的这套小技巧奉献出来，希望大家喜欢！

基本代码及方法

基本代码： <P title="<0>"style="BACKGROUND-IMAGE: url(图片地址); WIDTH: 宽px; HEIGHT:高px"></P>

   或 <DIV  title="<0>" style="BACKGROUND-IMAGE: url(图片地址); WIDTH: 宽px; HEIGHT: 高px"></DIV>

编辑方法：可用“日志”或“HTML在线编辑器”编辑贴图代码，下面是以“日志”为例。

    1、复制上面代码，粘贴在日志里：复制上面代码→点写日志→点<>进入代码编辑→粘贴上面代码；

    2、输入图片的地址、高度、宽度：输入图片地址→输入图片高度、宽度→点<>返回→点发表日志。

使用方法：

    1、可直接将图片复制粘贴到留言栏：

       选中图片→右键复制或点工具栏中的复制→打开留言栏→点全部功能→右键粘贴→发表留言。

       选中图片的方法：鼠标从图片的下面向上滑动。在滑动时，如图片下方出现白框或白点时表

                       示图片被选中。图片选中后，轻轻地按右键复制。如按右键不能复制，可

                       点击网页工具栏中的“复制”按钮。

    2、可将图片代码复制粘贴到回复栏：

       复制编辑好的代码→点回复此留言→右键粘贴→确定→点“查看留言记录”（看显示效果）。

实例01代码

<P title="<0>"style="BACKGROUND-IMAGE: url(http://img.bimg.126.net/photo/r7zYAk87ankPByZtll9Hpg==/2045197180781159179.jpg); WIDTH: 460px; HEIGHT: 325px"></P>

实例01效果

淡化边缘效果

实例02代码

<P title="<0>"style="FILTER: Alpha(opacity=100,style=2); BACKGROUND-IMAGE: url(http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg);WIDTH: 350px; HEIGHT: 400px"></P>

其中：opacity:开始处的透明度，finishOpacity:结束处的透明度；

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

实例02效果

添加边框效果

实例03代码

<P title="<0>"style="border:14px #987cb9 double; BACKGROUND-IMAGE: url(http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg);WIDTH: 350px;HEIGHT: 400px"></P>

实例03效果



实例04代码

<P title="<0>"style="border:14px #987cb9 groove; BACKGROUND-IMAGE: url(http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg);WIDTH: 350px;HEIGHT: 400px"></P>

实例04效果

HTML在线编辑器：（ 1  2  3 ）

注意：非163.com/和126.net/域名的图片，或者说不是网易的图片做出来的图帖，有时不能直接复制

          粘贴。但是，编辑出来的代码可复制粘贴到回复栏，点“查看留言记录”后，能够显示效果。

一、最简的贴图表格代码

代码一：

<TABLE title="<0>"style="BACKGROUND-IMAGE: url(图片地址); WIDTH: 宽度px; HEIGHT: 高度px"align=对齐>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>

图片地址： http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_1.jpg

图片大小： 450×290

代码二：

<TABLE align=对齐>
<TBODY>
<TR>
<TD>
<DIV title="<0>"style="BACKGROUND-IMAGE: url(图片地址); WIDTH: 宽度px; HEIGHT: 高度px"></DIV></TD></TR></TBODY></TABLE>

图片地址： http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_1.jpg

图片大小： 450×290



二、添加背景（边框）的代码及方法

背景（边框）的代码：

<TABLE title="<0>"style="BACKGROUND-IMAGE: url(图片地址); WIDTH: 宽度px; HEIGHT: 高度px"align=对齐>

<TBODY>

<TR>

<TD align=对齐>

<DIV title="<0>"style="BACKGROUND-IMAGE: url(图片地址); WIDTH: 宽度px; HEIGHT: 高度px"></DIV>

</TD></TR></TBODY></TABLE>

图片、边框的设置：

图片位置，在默认的情况下是在表格中的左上方，调整的方法是：

    水平方向：align="对齐" left 左 center 中 right 右，或用不断行空白 “ ”；

    垂直方向：用<br>、<p></p>、 <p> </p>调整。

边框宽度，等于边框图的宽、高分别减去图片的宽、高再除2。

三、添加背景（边框）的实例

实例1、添加背景

背景图片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_2.jpg

背景图片大小：564×366

图片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_3.jpg

图片大小：382×76

代码：  <TABLE title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_2.jpg); WIDTH:382px; HEIGHT:366px"><TBODY><TR><TD vAlign=top align=middle><DIV title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_3.jpg); WIDTH:382px; HEIGHT: 120px"></DIV></TD></TR></TBODY></TABLE>

实例2、添加边框　

　

边框图片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_4.jpg

图片地址： http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_5.jpg

图片大小： 450×325

代码： <TABLE title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_4.jpg); WIDTH:490 px; HEIGHT: 365px"><TBODY><TR><TD align=middle><DIV title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_5.jpg); WIDTH: 450px; HEIGHT: 325px"></DIV></TD></TR></TBODY></TABLE>

实例3、添加背景和边框

边框图片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_4.jpg

背景图片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_6.jpg

背景图片大小：478×331

图片地址：http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_7.jpg

图片大小： 93×141

代码：   <TABLE title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_4.jpg); WIDTH:478 px; HEIGHT:331px"><TBODY><TR><TD align=middle> <TABLE title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_6.jpg); WIDTH: 440px; HEIGHT:300px"><TBODY><TR><TD><BR><BR><BR><BR><BR><BR><BR>
<DIV title="<0>"style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029175_7.jpg); WIDTH:440px; HEIGHT:141px"></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

常用的贴图标签代码：

<img src="图片地址"width="宽度" height="高度"alt="说明"border="边框宽度">

区域标签贴图代码：

<div title="<0>"style="BACKGROUND-IMAGE: url(图片地址); WIDTH: 宽度px; HEIGHT: 高度px"></div>

一、区域标签合成图的原理

（1）先给出如下两张图的代码。

图1、图2的代码：

<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_1.jpg); WIDTH: 440px; HEIGHT: 340px"></div>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_2.jpg); WIDTH: 400px; HEIGHT: 300px"></div>

图1、图2的效果：

从图1、图2的效果可看出：图2紧接图1的下方，两张图显示在一个层面上。

（2）将图1的区域结束标签</div>移到最后。

移动</div>后的代码：

<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_1.jpg); WIDTH: 440px; HEIGHT: 340px">
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_2.jpg); WIDTH: 400px; HEIGHT: 300px"></div></div>

移动</div>后的效果：

从移动</div>后的效果可看出：图2叠加在图1的上面，位于图1的左上方，两张图在两个层面上。

以上还不难看出：图1成了图2的背景，这就是制作背景的原理。在此基础上再对图2

进行垂直、水平位置的调整，图1成了图2的边框。调整图2位置的方法，请看下一步。

（3）调整图片位置与文字位置设置的方法相同。

                图片在默认的情况下是在左上方，调整位置方法是：

                水平方向：align="位置"   left 左 center 中 right 右，或用不断行空白 “  ”；

                垂直方向：可用<br>、<p></p>、 <p> </p>调整。



位置调整后的代码：

<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_1.jpg); WIDTH: 440px; HEIGHT: 340px"><BR>
<div align=center>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_2.jpg); WIDTH: 400px; HEIGHT: 300px"></div></div></div>

位置调整后的效果：

从位置调整后的效果可看出：如图1是做边框的，边框宽度等于图1的宽、高分别减去图2的宽、高再除2。

      上面，介绍了用区域标签，可以使图片叠加，叠加后的层次为两层。下面介绍图片可叠加多层，并能在叠加

      的某一层上放多张图片。

二、多层叠加合成图

三层叠加图代码：

<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_1.jpg); WIDTH: 440px; HEIGHT: 340px"><BR><div align=center>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_2.jpg); WIDTH: 400px; HEIGHT: 300px"><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><div align=left>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_3.jpg); WIDTH: 140px; HEIGHT: 60px"></div> </div></div></div></div>

三层叠加图效果：

在某一层上放多张图的代码：

<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_4.jpg); WIDTH: 540px; HEIGHT: 440px"><BR>
<div align=center>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_5.jpg); WIDTH: 500px; HEIGHT: 400px">
<div align=right>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_6.jpg); WIDTH: 150px; HEIGHT: 127px"></div></div>
<div align=left>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_7.jpg); WIDTH: 70px; HEIGHT: 70px"></div><BR><BR><BR><BR><BR>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_3.jpg); WIDTH: 140px; HEIGHT: 60px"> </div></div> </div></div></div>

  在某一层上放多张图的效果：

加上移动标签的代码：

<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_4.jpg); WIDTH: 540px; HEIGHT: 440px"><BR>
<div align=center>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_5.jpg); WIDTH: 500px; HEIGHT: 400px">
<MARQUEE scrollAmount=10 width="100%">
<div align=right>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_6.jpg); WIDTH: 150px; HEIGHT: 127px"></div></div></MARQUEE>
<MARQUEE scrollAmount=14 direction=right width="100%">
<div align=left>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_7.jpg); WIDTH: 70px; HEIGHT: 70px"></div><BR><BR><BR><BR><BR>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_3.jpg); WIDTH: 140px; HEIGHT: 60px"></div></div></MARQUEE></div></div></div>

加上移动标签的效果：

特别提醒：目前，网易博客留言栏、回复栏，还不能使用移动代码。

三、添加图片边框的方法

添加一张图片边框的代码：
<div align=center><div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_8.jpg); WIDTH: 480px; HEIGHT: 420px"><BR>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_9.jpg); WIDTH: 450px; HEIGHT: 380px"></div></div></div>

添加一张图片边框的效果：

添加两张图片边框的代码：

<div align=center>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_10.jpg); WIDTH: 430px; HEIGHT: 900px"><BR>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_11.jpg); WIDTH: 400px; HEIGHT: 340px"></div><BR>
<div title="<0>" style="BACKGROUND-IMAGE: url(http://image68.360doc.com/DownloadImg/2014/01/0514/38029234_12.jpg); WIDTH: 400px; HEIGHT: 500px"></div></div></div>

添加两张图片边框的效果：

  注意：使用<div></div>标签编辑图片虽较简单，但也存在不少缺点：

1、定位不精确。尤其是垂直定位，向下移动一次最小是一个<br>，相当于20px.。

   2、版面不稳定。同一编辑，有时在日志、留言栏和HTML编辑器中的效果不一样。

3、不能直接编制边框。不能象表格标签哪样可直接编制边框，效果也不太理想。