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

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

    WordPress模板开发获取优酷视频缩略图

    有时写WEB程序时本文主要介绍WordPre…

  2. 没有图片

    2009.09.09

    关于Google Checkout

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

  3. 没有图片

    2009.07.26

    几款免费的优秀的图片存放和分享的网站

    大家都知有名的图片存放和分享网站 Picas…

  4. 没有图片

    2009.12.06

    微软浏览器 Pivot 使用体验

    今天下载了微软的最新版本浏览器 Pivot,…

  5. 没有图片

    2012.02.15

    linux下解压zip文件

    linux自带的unzip命令可以解压win…

  6. 没有图片

    2009.10.05

    基于Google Search的关键词工具

    Google工具直接根据Google搜索结果…

评论

  1. waitwho 2009.10.25 4:55下午

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

  2. 菠萝 2009.10.25 4:48下午

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

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

  3. 菠萝 2009.10.25 4:44下午

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

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