7b2美化之添加视差背景

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

实现方法：

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

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