给WordPress评论框加上背景图片

一、用图片设计软件自行设计背景图片,并将其透明度调到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;是指图片与评论框的右、底对齐

【本站资源无偿免费分享,如果资源对你有用,希望动动手指点点下面的广告吧!以维持服务器运行】
如需 WordPress 优化加速、主题修改、故障解决等服务,可联系我购买付费服务: 点此联系我 | 近期站内热门福利:

本文最后更新于2年前 (2018-06-13),若有错误或已失效,请在下方留言或联系QQ87200080

未经允许禁止转载
本文地址:https://www.77nn.net/315.html
版权声明:本文为原创文章,版权归 讯沃blog 所有,未经允许,禁止任何单位或个人转载!

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝、微信、QQ扫一扫,即可进行扫码打赏哦

0
分享到:

评论0

5 + 8 =
没有账号? 忘记密码?

社交账号快速登录