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

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

实现方法：

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

<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$‘’$ 这里面的图片链接换成你刚刚设置的背景图链接就好了。