小程序端无法用 backdrop-filter 或 filter: blur() 实现真·毛玻璃背景，唯一靠谱路径是用 canvas 手动绘制模糊图层再叠在内容下方；需注意离屏绘制、dpr适配、轻量模糊算法、精确尺寸对齐及 tempfilepath 缓存规避。
小程序端无法用 backdrop-filter 或 filter: blur() 实现真·毛玻璃背景，这不是写法问题，是平台渲染层根本不支持。想在微信/支付宝小程序里做出「个人信息中心背景虚化」效果，唯一靠谱路径是：用 Canvas 手动绘制模糊图层，再叠在内容下方。
为什么直接写 CSS 模糊在小程序里一定失败
微信小程序的 <view></view> 没有独立背景图层概念，<image></image> 又不支持 background-image；即使你加了 -webkit-backdrop-filter: blur(10px)，iOS 真机（尤其 iOS 15+）大概率无反应或白屏。这不是兼容性 bug，是底层限制——它压根没实现这个渲染管线。
小程序端用 Canvas 实现背景模糊的实操要点
核心思路：把背景图先画进离屏 canvas，用块状采样或简易高斯卷积模糊，再 drawImage 到主 canvas 上，最后用 uni.canvasToTempFilePath 导出为图片，赋给 <image></image> 组件作为背景。
- 图片必须是本地路径：
uni.downloadFile下载网络图后，用uni.getImageInfo获取宽高，不能直接传 URL 给 canvas - Canvas 尺寸要按设备像素比放大：比如设计稿是 750rpx 宽，DPR=3 的 iPhone 上 canvas.width 应设为
750 * 3，否则模糊图本身就会糊 - 别用纯 JS 高斯模糊大图：单张 1080p 图在低端安卓机上可能卡顿 2 秒以上；推荐用「均值模糊」或「四邻域采样」替代，半径控制在 3–6 像素内
- 模糊完记得调用
context.draw(false, () => {...})确保绘制完成再导出，否则生成的是空白图
如何让模糊背景和上层内容对齐不穿帮
常见穿帮现象：模糊图位置偏移、边缘露白、滚动时错位。关键在于三点：
- 模糊图 canvas 的
width/height必须和最终显示区域的物理像素完全一致（不是 rpx） - 用
uni.createSelectorQuery()获取真实 DOM 节点尺寸，而不是靠 rpx 估算 - 上层
<view></view>设置position: relative，模糊<image></image>用position: absolute+top: 0; left: 0; width: 100%; height: 100%覆盖，避免 margin/padding 干扰 - 如果背景图需要随滚动视差移动，不要用
transform: translateY，改用 canvas 动态重绘 y 偏移，否则模糊图会“撕裂”
最易被忽略的一点：模糊图导出后，微信小程序对 tempFilePath 图片仍有缓存策略，同一路径多次调用 canvasToTempFilePath 可能返回旧图。每次调用前务必拼一个时间戳或随机数到文件名里，比如 blur-bg-${Date.now()}.png。
