在微信小程序中或UniApp中自定义tabbar实现毛玻璃高斯模糊效果

backdrop-filter: blur(10px); 这一行代码表示将背景进行模糊处理,模糊程度为10像素。这会导致背景内容在这个元素后面呈现模糊效果。
background-color: rgb(255 255 255 / .32); 这一行代码表示设置元素的背景颜色为白色(RGB值为0, 0, 0),并且通过/符号后面的透明度值(32%不透明度)使背景半透明。这会导致背景显示为半透明的白色。

微信小程序

当tabbar背景颜色是黑色(#000000)的时候,设置background-color: rgb(0 0 0 / .32)

css 复制代码
/* 设置tabbar背景颜色 */
background-color: #000000 !important;
/* 毛玻璃 高斯模糊 */
backdrop-filter: blur(10px) !important;
background-color: rgb(0 0 0 / .32) !important;

当tabbar背景颜色是白色(#ffffff)的时候,设置background-color: rgb(255 255 255 / .32)

css 复制代码
/* 设置tabbar背景颜色 */
background-color: #000000 !important;
/* 毛玻璃 高斯模糊 */
backdrop-filter: blur(10px) !important;
background-color: rgb(255 255 255 / .32) !important;

UniApp

与微信小程序写法类似,但是background-color需要改成

css 复制代码
/* 设置tabbar背景颜色 */
background-color: #000000 !important;
/* 毛玻璃 高斯模糊 */
backdrop-filter: blur(10px) !important;
background-color: rgba(255,255,255,.32) !important;
相关推荐
晓风伴月8 小时前
微信小程序:在ios中border边框显示不全
ios·微信小程序·小程序
新酱爱学习9 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
2501_9160137411 小时前
iOS 加固工具使用经验与 App 安全交付流程的实战分享
android·ios·小程序·https·uni-app·iphone·webview
军军君0113 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
两个月菜鸟13 小时前
微信小程序进度条cavans
微信小程序·小程序
從南走到北13 小时前
JAVA青企码协会模式系统源码支持微信公众号+微信小程序+H5+APP
java·微信·微信小程序·小程序·uni-app·微信公众平台
pearbing14 小时前
持续优化小程序排名,稳定获取搜索流量
小程序
2501_9151063215 小时前
Fiddler 中文版抓包实战 构建标准化调试流程提升团队协作效率
android·ios·小程序·https·uni-app·iphone·webview
mg66816 小时前
微信小程序入门实例_____从零开始 开发一个每天记账的微信小程序
微信小程序·小程序
sanhuamao16 小时前
Taro+nestjs+mongodb实现健身记录微信小程序
微信小程序·taro·nestjs