b2主题美化之添加视差背景图

20210511145209804.pngoptimize75

效果和我主页一样,就是背景不动,但视角改变。

实现方法:

首页新建一个模块,添加一张模块背景图,调用内容选自定义

<div class="module parallax"><div class="wrapper" style="margin: auto;"><h4 class="entry-title"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jingxuan-white"></use></svg>&nbsp;&nbsp;精选教程推荐</h4></div></div>

其中的图标可以自行修改成你喜欢的。

宽度选铺满窗口。

然后:

b2常规设置的模块头部html标签选项添加css

<style>
.module.parallax {
display: flex;
min-height: calc(100vh - 80vh);
position: relative;
text-align: center;
}
.module.parallax:before {
content: '';
background-image: url(https://rizhuti.com/wp-content/themes/rizhuti-v2/assets/img/pattern.png)!important;
height: 100%;
width: 100%;
opacity: 0.5;
left: 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
-webkit-transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.module.parallax .entry-title {
color: #fff;
font-size: 26px;
font-weight: 500;
margin-bottom: 0;
position: relative;
letter-spacing: 2px;
}
/* home_row_4 自定义html显示背景图 这里设置看下面!!!*/
.home_row.home_row_4.module-html.home_row_bg_img{
padding: 0;
background-image: url('https://www.helloimg.com/images/2021/05/04/BgdXVA.md.png')!important;
background-position: center center!important;
background-size: cover!important;
background-repeat: no-repeat!important;
background-attachment: fixed!important;
}
</style>

这样设置了PC端已经没问题了,但移动端还有一个小问题就是,手机端会隐藏背景图,因此还需要一点小修改。

先去数一下,这个视差组件排第几个,我这里是第5个,从0开始数就是4。因此对应的DOM类就是 home_row_4。你需要做的就是把上面css代码最后的这个 home_row_4 改成你的,home_row_5,home_row_6 等等。然后再把

background-image: url‘’ 这里面的图片链接换成你刚刚设置的背景图链接就好了。

20210511150149582-1024x257.pngoptimize75

给TA买糖
共{{data.count}}人
人已赞赏
WordPress教程

批量替换B2主题视频封面地址的代码

2021-4-11 21:57:07

WordPress教程

为WordPress文章指定过期时间插件

2020-7-30 18:25:09

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