原文地址:http://80hman.com/comment-label.html 感谢作者
一、用图片设计软件自行设计背景图片(尺寸是依据实际情况自定,推荐300*80),并将其透明度调到50%(看个人喜好),上传到服务器,并记下图片绝对路径(这样不容易出错,当然相对路径也行)!例如你设计的图片命名为comment-bground.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下,那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment-bground.png”。
二、打开你博客有评论框的任何一个页面,查看页面的源代码或者直接查看主题目录下的comment.php文件;
可以看到评论框有类似的代码:
1 2 | <label class="’textarea" for="’comment’">Your Comment</label> <textarea id="’comment’" class="’textarea’" tabindex="’4′" cols="’60′" name="’comment’" rows="’10′"></textarea> |
可以发现评论框是用textarea代码来控制的,并且textarea文本区域对应的CSS样式表ID为comment,因此可以直接到主题样式style.css里找到#comment代码,其作用就是定义评论框的样式。
打开“/wp-content/themes/你的当前主题/”目录下的style.css文件,查找#commentform textarea,你会发现如下代码:
1 2 3 4 5 6 7 8 9 | #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%; } |
添加代码后变成如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 | #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;是指图片与评论框的右、底对齐。
最后,我做了一个 皮卡丘的背景图片,大家看看吧
本文遵守署名-非营利性使用-相同方式共享协议,转载请保留本段:冰丝带雨 » [转载]给评论框加上背景图片