一、用图片设计软件自行设计背景图片，并将其透明度调到50%（看个人喜好），上传到服务器或七牛
例如你设计的图片命名为comment.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下，那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment.png”。
二、打开你博客有评论框的任何一个页面，查看页面的源代码或者直接查看主题目录下的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: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;是指图片与评论框的右、底对齐
四、效果图
真实效果见本站
赞赏
除特别注明外，本站所有文章均为LJY IT BLOG原创，转载请注明出处来自https://www.ljy2345.com/2015/03/1268/
Comments | NOTHING