7b2主题美化 图片背景添加视差模糊效果

Jaysun

先看效果图:

20210511145209804.png

背景图片上增加视差模糊效果,增加朦胧感,避免背景图片太突兀,与网站整体不协调,这个效果ripro,总裁主题都有使用,喜欢的朋友可以使用,记得收藏本站,以防后期再用的时候找不到了。


使用教程:

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

<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

隐藏内容
评论可见
前往评论

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

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

20210511150149582-1024x257.png


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 6 条评论,654人围观)
网友昵称:飞翔机器人
飞翔机器人 V 普通用户 Google Chrome 120.0.0.0 Mac OS X 10.15.7 6楼
03-08 来自青海 回复
感谢分享
网友昵称:shenbudu
shenbudu V 普通用户 Firefox 115.0 Windows 10 x64 地板
2023-08-01 来自四川 回复
拿走了谢谢
网友昵称:云提供
云提供 V 普通用户 Google Chrome 114.0.0.0 Windows 10 x64 凉席
2023-07-09 来自上海 回复
学习了
网友昵称:root666
root666 V 普通用户 Google Chrome 113.0.0.0 Windows 10 x64 板凳
2023-06-30 来自香港 回复
赞、狂赞、超赞、不得不赞、史上最赞!
网友昵称:maoshe
maoshe V 普通用户 Google Chrome 94.0.4606.71 Windows 10 x64 椅子
2023-05-26 来自广西 回复
赞、狂赞、超赞、不得不赞、史上最赞!
网友昵称:qwe2001
qwe2001 V 普通用户 Google Chrome 113.0.0.0 Windows 10 x64 沙发
2023-05-20 来自广东 回复
赞、狂赞、超赞、不得不赞、史上最赞!

目录[+]

取消
微信二维码
微信二维码
支付宝二维码