给评论框加上个性签名

许三品 © 2008年4月7日 Filed under: 网络日志

很早就在桥蛋的博客上看到它的评论框里加上了半透明的签名图片，觉得非常有个性！昨天去逛桥蛋的博客时看到有朋友问及如何实现评论框上的签名效果，自己也想知道，但桥蛋回复说这个效果是很久之前做的，所以自己都不记得了，要查看一下才能回复！

我是一急性子，很不喜欢等待的感觉，算了，不等了，自己研究一下吧！

通过查看桥蛋博客的网页源代码发现它这个签名效果是通过CSS代码实现的，那就简单了，只要不修改模板文件那就不用重建文件，这是我最怕的，要是需要修改模板的话也许我不会加上这个效果！

实现这个效果很简单，只需要三步即可：

第一步：当然是先PS一张自己的签名图片啦，大小自己看着办，花果山寨使用的尺寸是180X100；

第二步：打PS好的签名图片上传到正在使用的模板图片文件夹里；

第三步：在正在使用的模板CSS文件修改，在CSS文件里找到textarea.text，在}前加入以下代码：

background:url(“图片所在文件夹/qianming.gif”) center no-repeat;

至此完成修改，回到日志页面刷新一下是不是看到了你定义的签名图片？很酷吧！？我就不截图了，看本日志评论框里的效果吧！

PS：收到大帝007的反馈图片居中问题，原来只是在IE6下进行测试通过，没有想到Firefox的兼容问题，所以重新修改了一下代码，现已通过IE6、Firefox、Opera浏览器测试，本人没装IE7所以无法测试，请有IE7的朋友帮忙测试并做个反馈，谢谢！


欢迎订阅: Google Reader | 鲜果 | 抓虾 | 九点 | QQ邮箱 | 有道 | 更多...

更多相关文章...

标签: , , 关注回复 引用文章
上周前六：
  • 吴侃 (2)
  • aisinvon (2)
  • peter程 (2)
  • 妖娆盛唐 (2)
  • 无言的山丘 (1)
  • 赵宏 (1)
    • 我要上榜

    22 Comments

    1. Kevin 说：
      2008年4月7日 于 15:35

      你这个签名应该做的更帅更酷一点吧 ？现在这个不太漂亮

      圭江猴子 于 2008-4-7 15:45:33 回复

      本人水平有限，如果你愿意可以帮忙设计一下！

      回复
    2. 大帝007 说：
      2008年4月7日 于 16:41

      这两天一直在找这个，不过看博主这个图片随着鼠标的移动也在移动，我的还是要改下，而且图片只显示一部分！

      圭江猴子 于 2008-4-7 17:12:15 回复

      你用的是什么浏览器~

      圭江猴子 于 2008-4-7 17:53:04 回复

      问题已经解决~

      回复
    3. 陌路阑珊 说：
      2008年4月7日 于 20:11

      真的很华丽哦

      圭江猴子 于 2008-4-7 21:38:10 回复

      感觉不错~

      回复
    4. SunQ 说：
      2008年4月7日 于 21:00

      这个是不是在zblog里面用的啊？

      圭江猴子 于 2008-4-7 21:38:53 回复

      现在这个是用在zblog，但我想应该是通用的，只要找对相关CSS代码

      回复
    5. jogocun 说：
      2008年4月7日 于 21:15

      我用PJ该效果也早已实现，其实挺简单的吧~

      圭江猴子 于 2008-4-7 21:37:49 回复

      是挺简单的~呵呵~但如果不懂就不简单罗~

      回复
    6. 紫菜 说：
      2008年4月8日 于 09:24

      哪来的猴子在老子后山撒野

      圭江猴子 于 2008-4-8 12:21:52 回复

      你又是何方神圣？

      回复
    7. qihen 说：
      2008年4月8日 于 09:25

      莫非博主就是传说中的花果山水帘洞美猴王齐天大圣孙悟空？

      圭江猴子 于 2008-4-8 12:21:35 回复

      正是~哈哈~

      回复
    8. why 说：
      2008年4月8日 于 09:25

      楼上是说相声的？

      回复
    9. 西岸 说：
      2008年4月8日 于 13:22

      嗯，很好的一个玩意儿，有空我也来试验一下。:)

      回复
    10. lovehr 说：
      2008年4月8日 于 13:33

      给寨主提个建议：应该把花果山水帘洞的图片给弄上去，那样更好呐！

      圭江猴子 于 2008-4-8 13:45:14 回复

      那就不个性了~

      回复
    11. linker 说：
      2008年4月8日 于 14:19

      很不错，我用的ie7，效果很好！

      回复
    12. Alex 说：
      2008年4月8日 于 18:14

      果然很不错,收藏啦,过几天再弄…谢谢

      回复
    13. 桥蛋 说：
      2008年4月8日 于 23:04

      哈哈 够速度！是这样的，那我就不写了，让他直接来你这里看吧！！

      回复
    14. LoveBlogEarn 说：
      2008年4月10日 于 19:18

      这么漂亮 不得不留言了 呵呵

      圭江猴子 于 2008-4-11 12:33:03 回复

      呵呵~谢谢支持

      回复
    15. finder 说：
      2008年4月12日 于 00:08

      颜色很浅，不注意还真没看出来。

      圭江猴子 于 2008-4-12 8:56:19 回复

      应该很容易发现吧？

      回复
    16. dragongod 说：
      2008年6月24日 于 11:38

      啊，原来是zblog的。我用在wp里面倒也是可以，不过现在就是所有的input相关都加上了该背景图片。汗。
      原理应该就是CSS的样式，我估计我还是哪里没设对。继续研究。。。

      回复
    17. 雕塑 说：
      2008年8月26日 于 18:28

      强烈支持

      回复

    Post a Comment