uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果

最新推荐文章于 2024-03-01 17:00:13 发布

luobinzi

最新推荐文章于 2024-03-01 17:00:13 发布

阅读量2.3k

点赞数 1

分类专栏：笔记文章标签： uni-app html5 css3

本文链接：https://blog.csdn.net/m0_63250938/article/details/127396341

版权

本文介绍了在uni-app中如何处理去掉顶部导航栏后的手机安全区距离，使用`var(--status-bar-height)`获取安全区高度。同时探讨了实现局部背景模糊的技巧，通过`background: inherit`避免背景偏移。还讨论了去除`overflow: auto`滚动条的方法，并分享了监测页面滑动、在CSS中使用data中数据的技巧，以及创建背景颜色渐变和动态背景模糊效果的方案。

摘要由CSDN通过智能技术生成

问题：

1.uniapp去掉顶部导航栏后计算手机安全区距离

2.模糊背景的局部清晰

3.去除overflow: auto；带来的滚动条（没有滚动条也可以滚动）

4.监测页面滑动使用的方法

5.data中存储的数据在css中使用

6.背景颜色渐变

7.实现动态背景模糊效果

解决：

1.uniapp去掉顶部导航栏后计算手机安全区距离

var(--status-bar-height) ;

uniapp自带可以计算手机设备安全区的代码，使用 var(--status-bar-height) ; 便可直接获取

padding-top:  var(--status-bar-height) ;//给组件加个上边距

2.模糊背景的局部清晰

background: inherit;

使用background: inherit; css语句通过继承就可以实现

<body> <div class="father"> <div class="son">Background</div> </div> </body>
<style>
        .father {
            width: 800px;
            height: 800px;
            position: relative;
            background: url("../img/7.jpg") no-repeat fixed;
            padding: 1px;