分享

在图片上写字、插入图片的代码

 齐鲁生 2014-02-03

在图片上写字、插入图片的代码

 

    一般用在发表文章的时候,在左下角的"显示源代码"前打勾,进入到源代码编辑状态,然后粘贴以下代码,再把显示源代码前的勾去掉,以图片为背景,在图片上既可以打上你要输入的文字,当然也可以插入一些动画图片,见下图,图中右上角就是插入的gif动画图片。
 
代码如下:

  <DIV align=center>

<TABLE border=0 cellSpacing=2 cellPadding=0   align=center width=600  height=340 background= 图片的原地址>

<TBODY>

<TR>

<TD vAlign=top align=left>

<P><FONT style="FONT-FAMILY: 黑体; FONT-SIZE: 24px" color=#ed1c24 size=7>输入你的文字</FONT></P></TD></TR></TBODY></TABLE></DIV>

---------------------------------------------------------

输入你的文字

          在图片上写字、插入图片的代码


 


    height是图片的高度,width是宽度(在你挑选的背景图上右键属性查看高宽数值),可以根绝需要的图片自己设置background=图片的原地址,替换其它的即可,记得图片一定是新浪博客的图片且是原地址,可以先上传到博客相册在使用(上传后在图片上右键-属性-查看地址--替换至代码中)。例如:

http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_2

http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3


   以图片作为背景。在图片上写字的位置,主要在<td>里控制。

<td valign=top align=left>

水平方向控制:  align= 

                 align=center(居中),left(居左),right(居右)。

竖直方向控制:   valign= 

                  valign=top(顶端),bottom(底部),middle(居中)。


我们用上面的图片http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3作为背景:


效果一:文字居中

 <TABLE height=312 cellSpacing=0 cellPadding=0 width=410 align=center background= http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3  border=0>

<TBODY>

<TR>

<TD align=middle><FONT face=华文行楷 color=red size=5><B>云中漫步</B></FONT></TD></TR></TBODY></TABLE><BR></P>

<DIV id=textstyle_7 style="FONT-SIZE: 11pt; OVERFLOW: hidden; WORD-BREAK: break-all; TEXT-INDENT: 24px; WORD-WRAP: break-word">


云中漫步


文字居底部(左)

<TABLE height=312 cellSpacing=0 cellPadding=0 width=500 align=center background= http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_2   border=0> <TBODY> <TR> <TD align=left type="vertical" valign=bottom spacer><FONT face=华文行楷 color=red size=7><B>云中漫步</B></FONT></TD></TR></TBODY></TABLE>

云中漫步

 


文字居顶(左)

云中漫步top:表示文字居顶端。left:表示文字居左。


<TABLE height=312 cellSpacing=0 cellPadding=0 width=410 align=center background= http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3  border=0> <TBODY> <TR> <TD valign=top align=left type="vertical" spacer><FONT face=华文行楷 color=red size=7><B>云中漫步</B></FONT></TD></TR></TBODY></TABLE>


云中漫步


文字竖排(居中):在每个文字之间加<br>。

<TABLE height=312 cellSpacing=0 cellPadding=0 width=410 align=center background=http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3  border=0> <TBODY> <TR> <TD align=middle><FONT face=华文行楷 color=red size=5><B>云<BR>中<BR>漫<BR>步</B></FONT></TD></TR></TBODY></TABLE>


   
   
   



文字竖排居顶端(右)

云中漫步

<TABLE height=312 cellSpacing=0 cellPadding=0 width=410 align=center background= http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3  border=0> <TBODY> <TR> <TD vAlign=top align=right><FONT face=华文行楷 color=red size=5><B>云<BR>中<BR>漫<BR>步</B></FONT></TD></TR></TBODY></TABLE>

 

文字竖排居底部(左)

云中漫步

<TABLE height=312 cellSpacing=0 cellPadding=0 width=410 align=center background= http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3  border=0> <TBODY> <TR> <TD vAlign=bottom align=left><FONT face=华文行楷 color=red size=5><B>云<BR>中<BR>漫<BR>步</B></FONT></TD></TR></TBODY></TABLE>


 

文字竖排居底部(右)


<TABLE height=312 cellSpacing=0 cellPadding=0 width=410 align=center background= http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3  border=0> <TBODY> <TR> <TD vAlign=bottom align=right><FONT face=华文行楷 color=red size=5><B>云<BR>中<BR>漫<BR>步</B></FONT></TD></TR></TBODY></TABLE>

 

两组文字。(横排)  

<TABLE height=312 cellSpacing=6 cellPadding=0 width=410 align=center background= http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3  border=0> <TBODY> <TR> <TD vAlign=top align=middle type="vertical" spacer><FONT face=华文彩云 color=red size=5><B>云中漫步</B></FONT></TD></TR> <TR> <TD vAlign=bottom align=right type="vertical" spacer><FONT face=华文行楷 size=5><B><FONT color=#ff00ff>云</FONT><FONT color=#ff0000>中</FONT><FONT color=#ff0000>漫</FONT><FONT color=#ff00ff>步</FONT></B></FONT></TD></TR></TBODY></TABLE

 

两组文字一横一竖

 <TABLE height=312 cellSpacing=6 cellPadding=0 width=410 align=center background= http://image68.360doc.com/DownloadImg/2014/02/0323/38743777_3  border=0> <TBODY> <TR> <TD vAlign=top align=middle type="vertical" spacer><FONT face=华文彩云 color=red size=5><B>云中漫步</B></FONT></TD></TR> <TR> <TD vAlign=bottom align=right type="vertical" spacer><FONT face=华文行楷 size=5><B><FONT color=#ff00ff>云<BR></FONT><FONT color=#ff0000>中<BR></FONT><FONT color=#ff0000>漫<BR></FONT><FONT color=#ff00ff>步</FONT></B></FONT></TD></TR></TBODY></TABLE>

 

两组文字,竖排

<TABLE height=312 cellSpacing=6 cellPadding=0 width=410 align=center background=http://s15.sinaimg.cn/bmiddle/4c0baa66t6125e0113fde border=0> <TBODY> <TR> <TD vAlign=top align=right type="vertical" spacer><FONT face=华文彩云 color=red size=4><B>云<BR>中<BR>漫<BR>步</B></FONT></TD></TR> <TR> <TD vAlign=bottom align=left type="vertical" spacer><FONT face=华文行楷 size=4><B><FONT color=#ff00ff>云<BR></FONT><FONT color=#ff0000>中<BR></FONT><FONT color=#ff0000>漫<BR></FONT><FONT color=#ff00ff>步</FONT></B></FONT></TD></TR></TBODY></TABLE>

 

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约