当前位置:首页>WordPress>WordPress美化>WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

vieu主题修改方法

首先由于主题不同,所以我的CSS和大家并不一样!因此,我们需要找到评论框所在CSS!我使用的是vieu主题版本,用这个版本的可以直接添加代码使用,其它主题可以参考这个方法。
最常见的就是审查元素功能,鼠标右键查看元素或者直接按快捷键f12即可。
WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法
然后打开你的CSS修改下就好啦,最后保存下或者直接替换图片就是最好的方法。

其它修改方法

方法很简单一学就会,是通过CSS修改添加的:因此,我们需要找到评论框所在CSS!用这个版本的可以直接添加自定义样式代码使用,其它主题可以参考这个方法。

然后打开您的主题style.css文件,找到#comment,插入如下代码:

background-image:url(images/commentbg.png);
background-repeat:no-repeat;
background-position:center center;

 

完整代码

/**评论框添加背景图片**/#comment {
   background: #fff;
   width: 100%;
   margin: 0 10px 10px 0;
   padding: 5px;
   border: 1px solid #ddd;
   border-radius: 20px;
   -webkit-appearance: none;
   background-image:url(wp-content/wp-content/themes/begin/images/commentbg.png);/*评论框背景图片*/   background-repeat:no-repeat;
   background-position:center center;
}
/**结束**/

 

代码作用

其中background-image,表示背景图片的地址,可以是绝对地址,也可以是相对地址(相对于style.css文件来说的,以上代码是相对地址,也就是主题的images;绝对地址就要包含域名的完整路径)
background-repeat,该属性表示是否重复,no-repeat为不重复,默认不重复。重复样式如下图,满满的一大屏。


background-position,该属性用来控制图片在评论框中的位置,前一个参数表示左右位,后一个参数表示上下位。
最后保存,ftp上传style.css到主题文件夹覆盖就可以了!当然还有不要忘了上传背景图片哦!

背景图片

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

WordPress教程 | 给自己的博客评论框添加背景图片,让评论框不再单调的方法

©版权声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员Ciyol 或给邮箱发送邮件 admin@ciyol.cn 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip(点击下载),zip、rar解压,建议下载WinRAR(点击下载)

给TA打赏
共{{data.count}}人
人已打赏
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
有新私信 私信列表
搜索