无评不博!为你的评论框添加漂亮的图片背景

评论框添加图片背景在《为你的WordPress博客添加版权声明》一文中,我为朋友们介绍了在博客日志中添加版权声明的方法,而本文菠萝将为大家介绍评论框内添加图片背景的方法。在讲设置方法之前,请大家看本文的评论框,里面我设置了“无评不博,相信你的评论一针见血”背景图片,添加上这样的图片,很容易激起大家的发言欲望,对你的博客热度的提升很有帮助,下面以WordPress博客为例,把我设置的方法与大家分享,其他博客方法基本相同:

首先,找到你所用风格的评论所在文件,我用的是M12的iNove风格,评论文件就是comment.php,打开此文件,发现评论框是用textarea代码来控制,并且textarea文本区域对应的CSS样式表ID为comment,这样我们就到主题样式表style.css里找到#comment代码,这个就是定义评论框的样式的,我们发现原来的代码为:

#comment {width:601px;}

这时,我们就可以通过改这个代码来实现给评论框添加上背景图片,添加后完整代码如下:

#comment {width:601px;background-image:url(img/comment-bg.gif);background-repeat:no-repeat;background-position:right bottom;}

下面对以上代码简单介绍:

width:是定义评论框的宽度;

background-image:url(图片地址),这里的图片可以绝对地址,也可以是相对地址,相对地址是相对style.css文件的,我就是用的相对地址。

background-repeat:no-repeat; 定义图片是不是重复;

background-position:right bottom; 定义图片对齐方式,这里是向右、底对齐。

之后你做个图片上传到你的空间,图片地址要和设置地址一致,建议图片宽度不要大于文本区域宽度,高度在200以内。效果参考本博评论框。

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2013.12.31

    MacBook 校准电池方法

    如果您的便携式 Mac 配备有可拆装电池,请…

  2. 没有图片

    2009.07.12

    2008年度五十个国外最漂亮网站推荐

    08年的网页设计开始流行一些破旧的质感和一些…

  3. 没有图片

    2009.07.28

    UUSee半年免费版卡巴斯基2009

    以前在用360安全卫士的时候,就用到了安装3…

  4. 没有图片

    2011.04.08

    通过.htaccess文件为你的博客添加图片防盗链功能

    很好网友反映,自己好不容易发的日志,特别是图…

  5. 没有图片

    2011.09.14

    获取指定不同发布类型的日志的评论

    注意了,本文所说的是调用不同发布类型(pos…

  6. 没有图片

    2009.09.09

    关于Google Checkout

    今天打开一个英文站 Mylife ,在浏览这…

评论

  1. 一起囧 2010.05.11 10:45上午

    不错诶 我也来一针见血吧
    .-= 一起囧的最新日志:我来推荐个海外空间吧! =-.

  2. 妖娆男 2010.03.28 8:02上午

    哈哈,从你这学到不少呢。希望你把这个“无评不博”的完整图发给我邮箱一份吧,谢谢。我弄了个山寨的,颜色太淡了,是从你这截的图。
    另外,你的“版权声明”最后出现的“本文链接”地址打不开,是错误的,我试验了一下,是因为多了个代码,就是中间的!我取掉就好了。

  3. 水水 2010.03.08 11:54上午

    不错哇,很好看·~
    .-= 水水的最新日志:和时间赛跑,和自己赛跑 =-.

  4. Zenoven自由人 2009.11.05 6:01下午

    我很久没给网站改动了。。。感觉现在还是写内容好,以后找个时间专门给界面优化下

  5. ibayern 2009.11.04 9:59下午

    不错不错,学习下!

  6. 漫步徜徉 2009.11.02 8:17下午

    谢谢分享 先收下了

  7. keon 2009.10.29 11:47下午

    不错的东西~~我也来试试

  8. magicshui 2009.10.29 11:43下午

    效果不错,挺喜欢的……实用才是王道

  9. newcoin 2009.10.29 10:27上午

    很有意思,学习了

  10. 菠萝 2009.10.27 7:36下午

    @理想博客
    喜欢就好!

    @一米
    看到了,很好的效果!

  11. 一米 2009.10.27 11:55上午

    已经再用了啊,哈哈。

  12. Gil 2009.10.26 11:11下午

    额,俺也我自家的博客上加个试试,希望广大的博友针针见血,嘿嘿!~~

  13. 疾风 2009.10.26 10:48下午

    很好看哦,考虑给我也弄一个~ 呵呵~

  14. 一起来玩吧 2009.10.26 10:40下午

    不错 啊

  15. 理想博客 2009.10.26 7:17下午

    前几天正在找这个设置了。谢谢了。

  16. 随影 2009.10.26 2:19下午

    呵呵 确实 挺好看的

  17. MuMu’S 2009.10.26 12:03下午

    很好的功能啊。
    而且字体眼色很你的博客很搭。

  18. lovenhe 2009.10.26 8:55上午

    很好 很强大……

  19. qiqiboy 2009.10.26 3:09上午

    。。。嗯。。这个实在,以前在博客大巴时就搞过。。

  20. 微知博客 2009.10.26 1:31上午

    我觉得评论数不能代表什么

  21. 菠萝 2009.10.25 10:29下午

    @Thinkqob
    呵呵,谢谢!

  22. Thinkqob 2009.10.25 9:28下午

    主题改的真漂亮

  23. 左岸读书 2009.10.25 6:47下午

    我也在思考一个好的评论背景图!

  24. 翔子 2009.10.25 6:15下午

    这个不错 回头我去试下~

  25. 戴亮 2009.10.25 5:46下午

    好看,牛啊!!!

  26. waitwho 2009.10.25 4:55下午

    那些“相信你的评论可以一针见血”之类的框框是咋回事哇?

  27. 菠萝 2009.10.25 4:48下午

    @静夜燃香
    你按教程弄好了,说明教程有用,不用客气!

    @三七八蛋
    谢谢加我!我去审核一下!

  28. 菠萝 2009.10.25 4:44下午

    @zwwooooo
    图片还是少点好!
    @帅青蛙
    对,可以自己设计个字体,我看到365hope的就不错。

    @mimzyx
    我的图片在这个主题目录iNove下的img/comment-bg.gif,CSS里只要输入 “img/comment-bg.gif”即可。

  29. 三七八蛋 2009.10.25 12:15下午

    不错。弄个图片是有味道一点。
    加入你 的GOOGLE朋友了。

  30. 减肥药排行榜 2009.10.25 10:48上午

    这个背景看的很舒服,不错

  31. 先看看 2009.10.25 10:16上午

    改天我也来一个好了

  32. 365hope 2009.10.25 9:34上午

    嗯,非常漂亮,非常好玩!

    貌似我早已经这样做了啊!呵呵~~~

  33. 超人 2009.10.25 4:28上午

    呵呵. 我以前加了.现在懒的加这东西了.~

  34. mimzyx 2009.10.25 12:15上午

    比如你的相对地址来说,是把图片放在哪?

  35. 静夜燃香 2009.10.25 12:04上午

    哈,添加了评论框的图片,版权声明也加了。很好用哦^^
    谢谢博主了。

  36. 帅青蛙 2009.10.24 10:45下午

    @whisperer
    我觉得字体换换就好了。现在的字体忒硬。。。 艺术字更好点。

  37. whisperer 2009.10.24 10:16下午

    设计得挺不错~~

  38. 不死鸟 2009.10.24 8:51下午

    无折腾,不博客

  39. zwwooooo 2009.10.24 8:33下午

    哈哈,不错啊,很多博主都加了,不过我就不加了,现在的主题用的图片够多了

  40. 华晨 2009.10.24 8:19下午

    真漂亮呀

  41. canaan 2009.10.24 8:13下午

    想不到加什么字,索性就不加了

  42. 菠萝 2009.10.24 7:46下午

    @Louis Han
    呵呵,谢谢,这个效果和版权声明弄了一下午,水平有限,多多指导!

  43. Louis Han 2009.10.24 7:35下午

    呵呵 这背景真的不错 看来是用心设计了