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

评论框添加图片背景在《为你的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. 没有图片

    2012.11.23

    Windows Server 2012 上安装 IIS 8 图文教程

    今天弄了台机器,下载了 Windows Se…

  2. 没有图片

    2011.11.23

    亚马逊广告联盟注册使用教程

    亚马逊广告联盟已经进驻中国,这应该说是中国站…

  3. 没有图片

    2013.12.06

    U盘没有写保护开关却提示被写保护 无法格式化

    近来大量的学生拿来U盘向我求救“老师,看我的…

  4. 没有图片

    2010.02.20

    网页配色表 设计者必备

    网页设计的时候需要各种颜色,都靠自己想象肯定…

  5. 没有图片

    2009.09.15

    重装XP后,还需要做的10件事

    机器用时间长了,不是变慢就是中毒很深,有时也…

  6. 没有图片

    2012.12.12

    WordPress 3.5 正式版发布 李思章博客升级

    本来只打算更新一下WordPress插件技术…

评论

  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下午

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