一、用图片设计软件自行设计背景图片(hicc的尺寸是360×120),并将其透明度调到50%(看个人喜好),上传到服务器,并记下图片绝对路径(这样不容易出错,当然相对路径也行)!例如你设计的图片命名为comment-bground.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下,那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment-bground.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: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%;
- }
三、说明。
把代码中的“上面提到的图片的绝对地址”换成那个图片的绝对地址
background-repeat:no-repeat;是指拉大评论框图片不重复出现;
background-position:right bottom;是指图片与评论框的右、底对齐。
四、自用的方法(知更鸟老版Begin主题)
五、知更鸟Begin主题最新LTS版方法(目前自用):
- /* 评论背景图 */
- #comment
- {background-image:url(https://ww2.sinaimg.cn/large/005UYuA2ly1g1z4dde3c3g30f1056t8y.jpg);
- background-repeat:no-repeat;
- background-position:center center;
- height: 130px;background-position: 100% 80%;}
相关链接
给评论框加上背景文字的技巧 —— WordPress美化教程
2018年11月10日 00:06 21楼
希望能成功
2018年12月11日 22:16 22楼
感谢分享。。。
2019年1月26日 00:05 23楼
怎么搞的
2019年8月6日 14:33 24楼
看看
2019年8月6日 23:48 25楼
拿走了,谢谢
2019年9月25日 18:06 26楼
希望能成功
2019年12月25日 14:07 27楼
感谢分享!
2020年4月19日 01:16 28楼
感谢分享!
2020年5月29日 15:51 29楼
很漂亮,不错
2020年11月28日 17:09 30楼
路过学习
2021年11月9日 10:41 31楼
看看
2023年4月11日 21:55 32楼
这样评论框看起来不单调,牛