Z-Blog 博客评论框添加图片或者文字背景教程

一次就够

       相信不少Z-Blog博客用户使用部分主题或看到部分用户主题中的文章评论框里有图片显示，有些用户也想给自己的博客评论框添加一张漂亮迷人或有个性的文字图片，比如卢松松博客的评论框里的文字。今天来教一下大家如何给Z-Blog评论框添加背景图片。
添加方法：
一、修改模版方法：
1、登陆博客后台，进入文件管理——THEMES目录——当前主题目录——TEMPLATE目录
2、找到b_article_commentpost.html文件（Z-Blog主题文件说明），用Notepad++等文本工具打开，找到以下代码：

<textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" ></textarea>

3、将以上代码替换为以下代码：

<textarea name="txaArticle" id="txaArticle"   class="text" cols="50" rows="4" tabindex="5"   style="background:url(/THEMES/<span style="color: #ff0000;">default/STYLE/boke8net.gif</span>) no-repeat scroll  left top; -moz-background-clip: -moz-initial; -moz-background-origin:  -moz-initial; -moz-background-inline-policy: -moz-initial;"  ></textarea>

图片路径所在地方是主题文件目录的STYLE目录中。这个请根据自己博客主题情况替换掉。


提醒：如果博客不是安装在网站空间的根目录而是在子目录，如http://www.***.com/z-blog/，那么就要把代码中的图片路径修改为z-blog/THEMES/default/STYLE/pinglun.gif 或者 http://www.***.com/z-blog/THEMES/default/STYLE/pinglun.gif 否则评论框的背景图片无法显示。

二、修改CSS样式：
1.首先就是做个你认为比较个性的图片，打上字，保存成任意格式的图片文件即可。
2.把图片上传到你主题目录的图片文件夹中，一般默认是images或者img。
3.打开主题中的 css 文件，一般是 style.css。查找以 #comment 命名的样式，将其样式中添加如下一行样式：

background:#FFFFFF url(images/comment_bg.gif) no-repeat scroll center center;

其中的图片文件 comment_bg.gif，就是你刚刚制作的图片文件名称。
4.上传所有修改过的文档后，重新刷新页面，即可看到你的评论框已经有了你所自定义的背景图片了。

友情提醒：
1、自己做图片的时候注意调整下整体图片的透明度，一般透明度保持在30左右即可，这样看起来不会太突兀，有主次之分，视觉效果最好。

2、建议图片的宽度不能超过文本区域宽度，高度在200以内。图片文件不要太大，太大会影响网页打开速度，建议20K以内。