7b2美化之添加视差背景

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

7b2美化之添加视差背景-即刻学术

给TA买糖
共{{data.count}}人
人已赞赏
技术活

搭建一个聊天机器人

2021-5-8 19:26:16

后端/架构建站教程技术活软件工具

OneTypecho - Typecho多端小程序开源!by 即刻学术

2021-5-11 22:40:30

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