问题：

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;
            box-sizing: border-box;
        }

        .father:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            background: inherit;
            filter: blur(3px);
            z-index: 1;
        }

        .son {
            position: absolute;
            left: 40%;
            top: 30%;
            width: 200px;
            height: 200px;
            text-align: center;
            background: inherit;
            z-index: 15;
            box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
        }
    </style>

这个实现原理主要就是要应用好background:inherit这个属性，背景的继承。这里不能用transform这个属性，不然背景会偏移，导致达不到清晰的效果。

inherit，使用继承

 局部模糊原文链接：https://blog.csdn.net/m0_47191887/article/details/115873419

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

div{
overflow:auto;
}
div::-webkit-scrollbar{
display: none;
}

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

使用onPageScroll() { }方法可以监测页面滑动时距离顶部的距离

注：onPageScroll（）{}  方法与methods方法同级

//监测页面滑动
  onPageScroll(e) {
   // console.log('[页面滚动]',e)
    if(e.scrollTop > this.Topdistance){
      this.isFixedTop = true
    }else{
      this.isFixedTop = false
    }
  },

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

通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS 的 attr() 函数获取该属性

<template>
  <div>
    <div class="box" 
    :data-content="obj.desc" 
    :data-percent="obj.percent"></div>
  </div>
</template>

<script>
  export default {
    name: 'Student',
    data() {
      return {
        obj: {
          percent: '30%',
          desc: '哈哈哈哈哈哈'
        }
      }
    },
    methods: {
    },
  }
</script>

<style>
.box {
  width: 400px;
  height: 200px;
  border: 1px solid salmon;
  position: relative;
}
.box::before, .box::after {
  position: absolute;
  top: 0; bottom: 0;
}
.box::before {
  content: attr(data-content);
  left: 0;
  right: calc(100% - attr(data-percent));
  background-color: deepskyblue;
}
.box::after {
  content: attr(data-content);
  right: 0;
  left: attr(data-percent);
  background-color: deeppink;
}
</style>

原文链接：https://blog.csdn.net/broken_promise/article/details/124628567

6.背景颜色渐变

使用linear-gradient

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

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

使用关键帧动画实现

在需要的class中用 animation 引用

<style>
        @-webkit-keyframes blur {
    0% {
        /* Chrome, Opera */
        -webkit-filter: blur(20px); 
        -moz-filter: blur(20px);     
        -ms-filter: blur(20px);
        filter: blur(20px);
    }
    50% {
        -webkit-filter: blur(15px);
        -moz-filter: blur(15px);
        -ms-filter: blur(15px);
        filter: blur(15px);
    }
    100% {
        -webkit-filter: blur(5px); 
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
    }
}

img{
    animation: blur 5s linear 0s 3;
}
    </style>
</head>
<body>
    <div>
        <img src="./img/7.jpg" alt="">
    </div>
</body>

# uni-app # html5 # css3
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局