给网站评论框内加上背景图片 —— WordPress美化

博客网站是交流的平台，所以阅读量和评论量是博客网站的生命！如何让更多的访友参与评论你的文章，提高博客网站的人气？除了文章要写得有声有色有特点外，还有一个小技巧：在博客网站的评论框内加上背景图片，吸引更多的人评论。孰不知，原来一张小小的图片能充分挖掘到那么多潜在的评论者呢！当然，如果你能加上一张适合主题的图片固然是好，但千万不要弄巧成拙，让评论框变得花花绿绿的，这样反而起到不好效果。建议：图片最好是简洁的一句话，让读者印象深刻！

非知更鸟Begin主题

1.用图片设计软件自行设计背景图片（hicc的尺寸是360×120），并将其透明度调到50%（看个人喜好），上传到服务器，并记下图片绝对路径（这样不容易出错，当然相对路径也行）！例如你设计的图片命名为comment-bground.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下，那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment-bground.png”。

2.打开你博客有评论框的任何一个页面，查看页面的源代码或者直接查看主题目录下的comment.php文件；

可以看到评论框有类似的代码：

<label for=’comment’ class=’textarea ’>Your Comment</label>
<textarea name=’comment’ id=’comment’ cols=’60′ rows=’10′ tabindex=’4′ class=’textarea’></textarea>

可以发现评论框是用textarea代码来控制的，并且textarea文本区域对应的CSS样式表ID为comment，因此可以直接到主题样式style.css里找到#comment代码，其作用就是定义评论框的样式。

打开“/wp-content/themes/你的当前主题/”目录下的style.css文件，查找#commentform textarea，你会发现如下代码：

#commentform textarea {
font: 110% Arial, Helvetica, sans-serif;
height: 140px;
border: solid 1px #999999;
padding: 5px 3px 3px 7px;
margin-top: -1px;
width: 90%;
max-width: 90%;
}

添加代码后变成如下所示：

#commentform textarea {
background-image:url(图片的地址);
background-repeat:no-repeat;
background-position:rightright bottombottom;
font: 110% Arial, Helvetica, sans-serif;
height: 140px;
border: solid 1px #999999;
padding: 5px 3px 3px 7px;
margin-top: -1px;
width: 90%;
max-width: 90%;
}

3.说明。

把代码中的“上面提到的图片的绝对地址”换成那个图片的绝对地址

background-repeat:no-repeat;是指拉大评论框图片不重复出现；

background-position:right bottom;是指图片与评论框的右、底对齐。

知更鸟Begin主题（数字版本）

打开“/wp-content/themes/Begin/”目录下的style.css文件，查找下面的代码

#comment {
   background: #fff;
   width: 100%;
   margin: 0 10px 10px 0;
   padding: 5px;
   border: 1px solid #ddd;
   border-radius: 2px;
    -webkit-appearance: none;
}

然后在它的上面一行增加下面的代码

#commentform textarea {
   background-image: url(图片地址);
   background-repeat: no-repeat;
   background-position: center;
}

知更鸟Begin主题最新LTS版方法（目前自用）

/* 评论框背景图 */
#comment 
{background-image:url(图片地址);
background-repeat:no-repeat;
background-position:center center;
 height: 130px;background-position: 100% 80%;}

给大家提供我搜集的各式各样的评论背景图片，见下方