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

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

    2010.06.24

    FireFox 3.6.4 正式版发布

    Firefox 3.6.3已经很久没升级了,…

  2. 没有图片

    2009.12.02

    WordPress 2.9 Beta2发布公测

    WordPress 2.8.6刚 发布不久,…

  3. 没有图片

    2013.12.29

    Debian系统下用 vsftpd 配置FTP服务完整教程

    Debian系统下用vsftpd配置FTP服…

  4. 没有图片

    2010.05.05

    七款免费在线设计网页背景图案、纹理工具

    网页设计可用的免费图案和纹理资源一文为大家推…

  5. 没有图片

    2012.11.22

    服务器端口被占用解决方案

    在服务器上安装某服务时,可能会遇到端口被占用…

  6. 没有图片

    2013.12.07

    Windows 8.1激活信息备份&还原方法详细教程

    备份方法: 1、记下激活使用的密钥。 2、复…

评论

  1. canaan 2009.10.24 8:13下午

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

  2. 菠萝 2009.10.24 7:46下午

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

  3. Louis Han 2009.10.24 7:35下午

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