WordPress网站B2主题评论框添加图片背景

本教程由老白博客@老白整理收集于网络,免插件实现“WordPress网站B2主题评论框添加图片背景”

WordPress网站B2主题评论框添加图片背景插图

1. 评论背景图

WordPress网站B2主题评论框添加图片背景插图1

WordPress网站B2主题评论框添加图片背景插图2

WordPress网站B2主题评论框添加图片背景插图3

WordPress网站B2主题评论框添加图片背景插图4

WordPress网站B2主题评论框添加图片背景插图5

2.设置教程

修改方法很简单,一般是通过修改主题的“style.css”文件来完成,当然有些可能是“main.css”。我们只需找到评论框样式的代码,然后修改即可。

(1)评论框id或class

右键审查元素——找到评论框所使用的id或者class,以下图为例,就是comment

WordPress网站B2主题评论框添加图片背景插图6

(2)加入评论框背景

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

/*添加评论背景*/
background-image:url(images/commentbg.png.webp);
background-repeat:no-repeat;
background-position:center center;

类似下图

WordPress网站B2主题评论框添加图片背景插图7

 

(3)B2主题

通用主题的设置方法在上面,以下分享的是b2主题的设置方法(不同点就在评论框的ID或class)

WordPress网站B2主题评论框添加图片背景插图8

主题style.css文件底部添加以下代码即可:

/*评论背景图-www.xcbtmw.com*/
.b2-radius #textarea {
background-color:transparent;
background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://imgsa.baidu.com/forum/pic/item/d439b6003af33a871f7e3f0e9b5c10385343b597.jpg.webp) right 10px bottom 10px no-repeat;
-moz-transition:ease-in-out 0.45s;
-webkit-transition:ease-in-out 0.45s;
-o-transition:ease-in-out 0.45s;
-ms-transition:ease-in-out 0.45s;
transition:ease-in-out 0.45s;
}
.b2-radius #textarea:focus {
background-position-y:789px;
-moz-transition:ease-in-out 0.45s;
-webkit-transition:ease-in-out 0.45s;
-o-transition:ease-in-out 0.45s;
-ms-transition:ease-in-out 0.45s;
transition:ease-in-out 0.45s;
}

(本教程转载自https://www.s9h.cn/,谢谢站长分享)

温馨提示:
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:duhaomu@163.com,我们将第一时间处理!
2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。
3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明

给TA赞赏
共{{data.count}}人
人已赞赏
未整理

【举一反三】小学奥数举一反三【三年级】

2022-3-12 0:00:00

未整理

金龙《抖音直播带货起号运营千川课》有策略才有高投产的投放课

2022-3-13 0:00:00

0 条回复 A文章作者 M管理员
----《》
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索