在微信小程序中或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;
相关推荐
一 乐1 小时前
实验室预约|实验室预约小程序|基于Java+vue微信小程序的实验室预约管理系统设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·毕业设计·论文·实验室预约小程序
雅致教育12 小时前
基于微信小程序的生签到系统设计与实现
微信小程序·小程序
说私域14 小时前
数字化转型中的开源AI智能客服与S2B2C商城小程序的融合创新
人工智能·小程序·开源·零售
转角羊儿1 天前
微信小程序—路由
微信小程序·小程序
橘猫云计算机设计1 天前
基于springboot放松音乐在线播放系统(源码+lw+部署文档+讲解),源码可白嫖!
android·java·spring boot·后端·spring·微信小程序·毕业设计
七公子771 天前
微信小程序常见问题记录合集
前端·微信小程序
DreamByte1 天前
Python菜鸟教程(小程序)
开发语言·python·小程序
大叔_爱编程2 天前
wx206基于ssm+vue+uniapp的优购电商小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计