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

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

    DEDECMS标题中去掉斜线的办法

    在上一教程中,我通过使用“DedeCMS当前…

  2. 没有图片

    2010.03.17

    三个可以托管上Twitter的源码:Twitese,Rabr,Dabr

    Twitter已经是墙外之特,我们只能望墙兴…

  3. 没有图片

    2012.10.26

    Office 2013 专业增强版简体中文正式版

    Office 2013 专业增强版简体中文版…

  4. 没有图片

    2010.03.22

    MSDN Windows 7 专业版 | Windows 7 Professional

    今天我的Windows 7 旗舰版资源管理器…

  5. 没有图片

    2014.12.17

    WordPress博客提速新选择:WP Acceleration for China

    写博客的朋友都在经历着一个艰难而漫长的体验:…

  6. 没有图片

    2010.03.25

    Adobe Flash Professional CS5 新功能

    Adobe Flash Profession…

评论

  1. 妖娆男 2010.03.28 8:02上午

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

  2. 水水 2010.03.08 11:54上午

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

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

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