之前我在小石头看到了《给wordpress评论框添上个性背景图片》,一开始我是没打算去折腾的,后来感觉挺好看的,于是就折腾了一下,给我博客的评论框也加上背景图片。效果图如下:

废话不多说,非常简单的教程。

1.自己PS一个图片,最好就是选择透明的png图片,其实不难的,在photoshop新建一个图片,选择透明,设置大小,再自己添加文字就可以了。至于大小的话,大家可以试试我的规格:500×140。不行可以自己调整一下。如下:

2.看看源码评论框的函数是什么。建议使用Opera或者Chrome浏览器。在评论框右击“审查元素”具体如下:

3.在代码处找到评论框的函数,由此可见评论框是由textarea控制的,而且该textarea文本区域对应的CSS样式表ID为comment。

4.打开主题文件下的style.css文件,搜索textarea文本区域对应的CSS样式表comment。我博客使用的是elegant-box主题,其他主题可能有差异,不过大概也是差不多的。

5.在style.css添加代码。

textarea#comment {

width:651px;background-image:url(/wp-content/themes/elegant-box/images/comment.png)

;background-repeat:no-repeat;background-position:right bottom;

}

这里简单介绍下以上代码:width:用来定义评论框的宽度。

background-image:表示背景图片的地址,可以是绝对的地址,也可以是相对的地址(相对于style.css文件来说的)。

background-repeat:该属性表示是否重复,no-repeat为不重复,默认重复。

background-position:该属性用来控制图片在评论框中的位置,前一个参数表示左右位,后一个参数表示上下位。

保存文件。ok.