给WordPre评论框加上背景图片方法(所有主题通用)

一、用图片设计软件自行设计背景图片

并将其透明度调到50%（看个人喜好），上传到服务器或七牛

例如你设计的图片命名为comment.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下，那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment.png”。

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

可以发现评论框是用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:right bottom;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%;}

三、说明

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

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

background-image:url(图片的地址); background-size:50% 50%;  //  这里可以加一个自适应为了手机端建议为%50

1、background-position：0 0；等于background-position:left top；（左上角）

2、background-position：100% 100%；等于background-position:right bottom；（右下角）

3、background-position：-70px -40px；(以左上角为0 0点坐标，向左偏移70px,向上偏移40px)

4、background-position：70px 40px；(以左上角为0 0点坐标，向右偏移70px,向下偏移40px)

5、background-position：50% 50%；等于background-position：center center；（居中显示）

效果如下：