一、用图片设计软件自行设计背景图片
并将其透明度调到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;是指图片与评论框的右、底对齐
background-image:url(图片的地址); background-size:50% 50%; // 这里可以加一个自适应为了手机端建议为%50
1、background-position:0 0;等于background-position:left top;(左上角)
2、background-position:100% 100%;等于background-position:right bottom;(右下角)
3、background-position:-70px -40px;(以左上角为0 0点坐标,向左偏移70px,向上偏移40px)
4、background-position:70px 40px;(以左上角为0 0点坐标,向右偏移70px,向下偏移40px)
5、background-position:50% 50%;等于background-position:center center;(居中显示)
效果如下:
1、本站提供的源码不保证资源的完整性以及安全性,不附带任何技术服务!
2、本站提供的模板、软件工具等其他资源,均不包含技术服务,请大家谅解!
3、本站提供的资源仅供下载者参考学习,请勿用于任何商业用途,请24小时内删除!
4、如需商用,请购买正版,由于未及时购买正版发生的侵权行为,与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中,请提前注册好百度网盘账号,下载安装百度网盘客户端或其他网盘客户端进行下载;
6、本站部分资源文件是经压缩后的,请下载后安装解压软件,推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益,请邮件联系: 11210980@qq.com 进行处理!
本文地址:https://www.zycang.com/116307.html
文章转载或复制请以超链接形式并注明来源出处。 本文最后更新于:2023-07-08 15:19:42
声明:某些文章或资源具有时效性,若有 错误 或 所需下载资源 已失效,请联系客服QQ:11210980
请登录后发表评论
注册