
效果和我主页一样,就是背景不动,但视角改变。
实现方法:
首页新建一个模块,添加一张模块背景图,调用内容选自定义
<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> 精选教程推荐</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‘’ 这里面的图片链接换成你刚刚设置的背景图链接就好了。
