uni-app 中 filter: blur() 在图片上无效是因 webview 和小程序渲染层兼容性限制；h5 可用 backdrop-filter 模拟毛玻璃，app/小程序需预生成模糊图叠加实现全平台兼容。
uni-app 中 filter: blur() 为什么图片没模糊？
直接写 filter: blur(10px) 在图片上，真机（尤其是 iOS）大概率没效果——这不是你代码写错了，是 filter 在 WebView 和小程序渲染层的兼容性限制导致的。H5 端基本可用，但 App 端（iOS WKWebView）和微信小程序里，<image></image> 组件不支持 filter，且部分安卓 WebView 版本也忽略该样式。
用 background-image + backdrop-filter 模拟毛玻璃
真正能跨端模拟毛玻璃（即背景虚化+前景内容清晰）的方式，是把图设为容器背景，再用半透明白色遮罩叠加文字等元素。注意：backdrop-filter 在小程序中完全不支持，在 App 端仅 iOS 14+、部分安卓高版本 WebView 支持；所以它只适合 H5 场景做增强体验。
- 必须用
<view></view>包裹，设置background-image和background-size: cover -
backdrop-filter: blur(12px)要加在前景层（如文字容器），且该层需有透明背景（background-color: rgba(255,255,255,0.6)） - H5 示例片段：
<view class="glass-container"><view class="glass-content">这里是文字</view></view>
.glass-container {
width: 300rpx;
height: 200rpx;
background-image: url('/static/bg.jpg');
background-size: cover;
}
.glass-content {
backdrop-filter: blur(12px);
background-color: rgba(255, 255, 255, 0.6);
padding: 20rpx;
}
App 和小程序里更稳妥的方案：预处理模糊图 + 叠加遮罩
放弃运行时滤镜，改用「两张图」：一张原图，一张服务端或构建时生成的高斯模糊图（比如用 ImageMagick 或在线工具生成 bg-blur.jpg），再通过绝对定位叠加。这是目前 uni-app 全平台兼容性最好的做法。
- 模糊图建议尺寸与原图一致，模糊半径 20–40px（视设计而定）
- 用
<image></image>加载模糊图作为底层，<view></view>定位其上并设半透背景 - 避免在
<scroll-view></scroll-view>内频繁切换模糊图，否则安卓低端机可能卡顿 - 示例结构：
<view class="glass-wrapper"><image src="/static/bg-blur.jpg" class="blur-bg"></image><view class="glass-overlay">标题文案</view></view>
uni-app 条件编译下不同平台的取舍
别试图一套代码打天下。H5 可用 backdrop-filter 做动态模糊；App 和小程序必须用预模糊图。用条件编译分路径是最务实的做法：
-
#ifdef H5：启用backdrop-filter+background-image -
#ifdef MP-WEIXIN || APP-PLUS：强制使用<image></image>模糊底图 + 静态遮罩 - 注意：App 端若用
web-view加载 H5 页面，则可绕过限制，但失去 uni-app 生命周期控制
毛玻璃的本质是视觉欺骗，不是必须实时计算。预生成模糊图看似麻烦，实则加载更快、兼容性拉满——这点在小程序首屏性能和安卓低端机上尤为关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
