在微信小程序中或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)

/* 设置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)

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

在这里插入图片描述

UniApp

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

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/468959.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

linux 基础总结

1、简述Raid0、raid1、aid5、Raid10的区别 RAID:redundant array of independent disks, 独立冗余磁盘阵列 磁盘阵列是由很多块独立的磁盘,组合成一个容量巨大的磁盘组,利用个别磁盘提供数据所产生加成效 果提升整个磁盘系统效能。利用这项技术&#x…

Scala--03--变量和数据类型

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 变量和数据类型1.注释2 变量和常量(重点)3 标识符的命名规范4 字符串输出5.IO 输入 输出键盘输入读写文件 IO 6.数据类型(重点&a…

Alma Linux - Primavera P6 EPPM 安装及分享

引言 继上一期发布的Rocky Linux版环境发布之后,近日我又制作了基于Alma Enterprise Linux 的P6虚拟机环境,同样里面包含了全套P6 最新版应用服务 此虚拟机仅用于演示、培训和测试目的。如您在生产环境中使用此虚拟机,请先与Oracle Primaver…

选择电能表时电流规格是否越大越好

选择电能表时,电流规格是否越大越好是一个值得深入探讨的问题。实际上,这个问题的答案并不是绝对的,而是需要根据具体的使用场景和需求来进行权衡。下面,我将从多个方面对这一问题进行详细的分析和探讨。 一、电流规格与电能表的基…

达索的有限元分析软件Abaqus 2024版本下载与安装配置

目录 前言一、安装前准备二、Abaqus 安装总结 前言 Abaqus软件是一款广泛使用的有限元分析软件,可用于模拟各种工程应用程序,包括结构、流体力学、热传递、电磁和声学等。该软件提供了广泛的建模功能和多种求解器,可以帮助工程师预测材料和结…

面试笔记——Redis(缓存击穿、缓存雪崩)

缓存击穿 缓存击穿(Cache Breakdown): 当某个缓存键的缓存失效时(如,过期时间),同时有大量的请求到达,并且这些请求都需要获取相同的数据,这些请求会同时绕过缓存系统&a…

数据集笔记:METR-la 原始数据转input/ground truth

0 问题介绍 在交通预测/时间序列预测的论文中(如论文笔记:Dual Dynamic Spatial-Temporal Graph ConvolutionNetwork for Traffic Prediction_dual dynamic spatial-temporal graph convolution ne-CSDN博客) 模型输入的是过去12个时间片的…

掌握关键技巧!音频转换精灵如何使用?

在数字媒体时代,音频格式的转换已成为日常工作中不可或缺的一部分。为了满足这一需求,市场上涌现出众多音频转换工具。其中,音频转换精灵以其强大的功能和简便的操作赢得了广泛好评。本文将为你详细介绍如何使用该软件,让你轻松完…

Compose UI 之 Segmented buttons 分段按钮

Segmented buttons SegmentedButton 是一种分段式按钮组件,它允许用户在一组相关的选项中选择一个或几个。 上图中:① 单选的分段式按钮。② 多选的分段式按钮。 分段式按钮的几个特点: 分段式按钮是带有状态的按钮,又有单选和多选之分。 从设计上将,不论是单选或是多选…

C# StableDiffusion StableDiffusionSharp 脱离python臃肿的环境

目录 说明 效果 项目 代码 下载 C# StableDiffusion StableDiffusionSharp 脱离python臃肿的环境 说明 Stable Diffusion in pure C/C github地址:https://github.com/leejet/stable-diffusion.cpp C# Wrapper for StableDiffusion.cpp github地址&#x…

SWIFT(环球同业银行金融电讯协会)详细介绍

可以说,最严厉的金融制裁之一,莫过于切断俄罗斯与SWIFT的连接。SWIFT究竟又是什么,在金融领域占据如此重要的地位?本文将从理论、实操以及技术层面展开详尽分析。 本文纲要 前言 一、SWIFT是什么 二、SWIFT的成立背景和组织架…

【13】vue2和vue3对比

vite: https://github.com/vitejs/vite 面试题:谈谈你对 vite 的理解,最好对比 webpack 说明 webpack 原理图 vite 原理图 面试题答案: webpack 会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。 而 vite 是直接启动开发服务器,请求哪个模块再对该模块进行实…

自喻女“梵高”,VRAR元宇宙领域业余画手举办线上3D虚拟数字化处女展!

众所周知,梵高画作通常采用粗大的笔触和厚重的油彩,结合丰富且饱和的色彩,给人印象鲜明大胆且笔触有力,比如著名画作《向日葵》、《星月夜》和《加歇医生》中可以看出,相比传统构图规则,他更倾向于用自己的…

蓝桥杯 2023 省B 接龙数列

思路分析: 创建一个大小为10的向量 hash,用于记录以每个数字结尾的字符串数量。输入字符串数量 n。循环读取每个字符串,并更新 hash 中以当前字符串结尾的字符串数量。同时更新最大字符串数量 count。输出不可达的字符串数量,即 …

HubSpot出海CRM助力企业实现全球营销布局!

随着全球化的浪潮不断推进,越来越多的企业开始将视线投向更为广阔的国际市场,寻求新的增长点。然而,国际化拓展并非易事,企业需要构建一套有效的全球营销战略,以应对不同国家和地区的文化差异、市场需求和竞争环境。在…

漫谈5种注册中心

01 注册中心基本概念 1.1 什么是注册中心? 注册中心主要有三种角色: 服务提供者(RPC Server):在启动时,向 Registry 注册自身服务,并向 Registry 定期发送心跳汇报存活状态。 服务消费者&…

2024热门外贸独立站wordpress模板

工艺品wordpress外贸主题 简约大气的wordpress外贸主题,适合做工艺品进出品外贸的公司官网使用。 https://www.jianzhanpress.com/?p5377 日用百货wordpress外贸主题 蓝色大气的wordpress外贸主题,适合做日用百货的外贸公司搭建跨境电商网站使用。 …

R语言程序设计(零基础速通R语言语法和常见函数的使用)

目录 1.Rstudio中的一些快捷键 2.R对象的属性 3.R语言中常用的运算符​编辑 4.R的数据结构 向量 如何建立向量? 如何从向量里面提取元素? 矩阵 如何建立矩阵? 如何从矩阵里面提取元素? 数据框 如何建立数据框&#xf…

Flink源码解析(1)job启动,从JM到TM过程详解

网络传输模型 首先在看之前,回顾一下akka模型: Flink通讯模型—Akka与Actor模型-CSDN博客 注:ActorRef就是actor的引用,封装好了actor 下面是jm和tm在通讯上的概念图: RpcGateway 不理解网关的作用,可以先移步看这里:网关_百度百科 (baidu.com) 用于定义RPC协议,是…

Linux内存管理笔记----TLB

1. TLB介绍 TLB是Translation Lookaside Buffer的简称,可翻译为“地址转换后援缓冲器”,也可简称为“快表”。 简单地说,TLB就是页表的Cache,属于MMU的一部分,其中存储了当前最可能被访问到的页表项,其内…