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

news2024/11/29 22:30:08

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;

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

行业模板|DataEase制造行业大屏模板推荐

DataEase开源数据可视化分析平台于2022年6月发布模板市场(https://templates-de.fit2cloud.com),并于2024年1月新增适用于DataEase v2版本的模板分类。模板市场旨在为DataEase用户提供专业、美观、拿来即用的大屏模板,方便用户根据…

Stable Diffusion WebUI 生成参数:高清修复/高分辨率修复(Hires.fix)

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 大家好,我是水滴~~ 在本篇文章中,我们将深入探讨 Stable Diffusion WebUI 的一个引人注目的生成参数——高分辨率修复(Hires.fix)。我们将逐一…

添加与搜索单词 - 数据结构设计

题目链接 添加与搜索单词 - 数据结构设计 题目描述 注意点 addWord 中的 word 由小写英文字母组成search 中的 word 由 ‘.’ 或小写英文字母组成1 < word.length < 25 解答思路 为了加快查询速度&#xff0c;可以使用字典树存储单词&#xff0c;基本结构是&#xf…

Linux: network: firewall: firewalld 导致icmp带admin prohibited

文章目录 简介查看相关的配置产生的rule不在rule里的被拒绝重新加载iptables服务进程简介 https://firewalld.org/documentation/man-pages/firewalld.zone.html 最近遇到一个主机主动回icmp,destination unreachable的错误包,而且里面的code是 administratively prohibited…

Flutter与Xamarin跨平台APP开发框架的区别

嘿&#xff0c;各位亲爱的朋友们&#xff01;大家好&#xff0c;我是咕噜铁蛋&#xff01;今天我们要探讨的话题是&#xff1a;Flutter与Xamarin这两款热门的跨平台APP开发框架。我深知选择合适的开发工具对于开发者来说有多么重要。那么&#xff0c;当我们需要开发跨平台应用时…

[Qt项目实战]Qt实现美松标签打印机标签二维码打印(QR混排模式+页打印模式)

1、硬件信息、环境参数及配套资料 1.1 打印机信息及开发环境 打印机 美松标签打印机串口/USB通讯Qt5.9 64位程序 1.2 打印机配套开发资料 打印机主要配套测试工具、开发SDK及驱动等&#xff0c;均由厂家提供。 开发Demo及动态库&#xff1a;MsPrintSDK-DLL-V2.2.2.5 链接&…

只需3步,使用Stable Diffusion无限生成AI数字人视频

基本方法 搞一张照片&#xff0c;搞一段语音&#xff0c;合成照片和语音&#xff0c;同时让照片中的人物动起来&#xff0c;特别是头、眼睛和嘴。 语音合成 语音合成的方法很多&#xff0c;也比较成熟了&#xff0c;大家可以选择自己方便的&#xff0c;直接录音也可以&#…

Linux TCP参数——tcp_allowed_congestion_control

tcp_allowed_congestion_control 设置允许普通进程使用的拥塞控制算法。这个参数的值阈是tcp_available_congestion_control参数的子集。默认值为"reno"加上tcp_congestion_control参数设置的算法。 reno 慢启动阶段&#xff1a;在开始的时候&#xff0c;cwnd按指数…

创建自己的“百度网盘”(部署owncloud)

[rootlocalhost html]# cd /root/[rootlocalhost ~]# wget https://download.com/server/stable/owncloud-10.12.0.zip --no-check-certificate #下载当前的owncloud代码包[rootlocalhost ~]# yum -y install unzip #安装解压工具[rootlocalhost ~]# unzip owncloud-10.12.0.zi…

BetterDisplay Pro for Mac(显示器校准软件) v2.0.11激活版

BetterDisplay Pro是一款由waydabber开发的Mac平台上的显示器校准软件&#xff0c;可以帮助用户调整显示器的颜色和亮度&#xff0c;以获得更加真实、清晰和舒适的视觉体验。 软件下载&#xff1a;BetterDisplay Pro for Mac v2.0.11激活版 以下是BetterDisplay Pro的主要特点&…

【数据分析可视化】动态生成柱状图

import pandas as pd import matplotlib.pyplot as plt import matplotlib.ticker as ticker from matplotlib.animation import FuncAnimation import matplotlib.patches as mpatches from matplotlib.animation import FFMpegWriter# 定义一个函数&#xff0c;用于生成…

开源模型应用落地-安全合规篇-模型输出合规性检测(三)

一、前言 为什么我们需要花大力气对用户输入的内容和模型生成的输出进行合规性检测,一方面是严格遵守各项法规要求,具体如下:互联网信息服务深度合成管理规定https://www.gov.cn/zhengce/zhengceku/2022-12/12/content_5731431.htm ​ 其次,受限于模型本身的一些缺陷,…

智能合约 之 ERC-20介绍

什么是ERC20 ERC20全称为Ethereum Request for Comment 20&#xff0c;是一种智能合约标准&#xff0c;用于以太坊网络上的代币发行 姊妹篇 - 如何部署ERC20 ERC20的应用场景 代币化资产&#xff0c;例如&#xff1a;USDT 是一种以美元为背书的ERC20代币&#xff0c;每个USDT代…

Unity 实现双屏或多屏内容展示

在某些应用场景&#xff0c;一个应用可能需要使用多个显示器显示。 Unity支持最多8个不同显示器同时显示应用程序中八个摄像头的视图&#xff0c;如下图&#xff1a; 具体实现如下&#xff1a; 1、在Hiearchy面板上点击鼠标右键->Camera,创建多一个Camera,如图&#xff1a…

Android Studio Gradle设置查看全部task

如果你在 Android Studio 的 Gradle 窗口中看不到所有的任务&#xff0c;你可以尝试以下步骤来解决这个问题 android studio 版本&#xff1a; Android Studio Iguana | 2023.2.1 Build #AI-232.10227.8.2321.11479570, built on February 22, 2024 打开 Android Studio 的设置…

深入探讨Python中的文件操作与文件IO操作【第141篇—Python实现】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 深入探讨Python中的文件操作与文件IO操作 在Python编程中&#xff0c;文件操作和文件IO操作…

maven手动上传的第三方包 打包项目报错 Could not find xxx in central 解决办法

背景: 在Maven私服手动上传了第三方的jar包, 只有jar包, 没有pom文件, 项目在ide中可以正常编译启动,但打包报错无法找到jar包 解决办法: 上传jar包的时候, 点击生成pom. 则打包的时候不会报错

RHCE——三:Web服务器(内网穿透实验)

RHCE—第三天&#xff1a;Web服务器 一、WWW简介1、常见Web服务程序介绍&#xff1a;2、服务器主机3、主要数据4、浏览器5、网址及HTTP简介URL 二、部署Nginx1、常用命令systemctl系列nginx自带命令nginx配置文件 2、实验操作实验1&#xff08; 快速搭建网站&#xff09;实验2&…

OCP NVME SSD规范解读-13.Self-test自检要求

4.10节Device Self-test Requirements详细描述了数据中心NVMe SSD自检的要求&#xff0c;这一部分规范了设备自身进行各种健康检查和故障检测的过程。自检对于确保SSD的正常运行和提前预防潜在故障至关重要。 在进行设备自检时&#xff0c;设备应当确保不对用户数据造成破坏&am…

python字典:打印字典中的键、值、打印所有字典、python遍历字典

1.定义 字典以花括号&#xff08;{}&#xff09;括起来&#xff0c;里面的元素是成对出现的&#xff0c;不同对元素用逗号&#xff08;,&#xff09;分开&#xff1b;一对元素用 冒号&#xff08;&#xff1a;&#xff09;分割。 2.解读 字典里的每一对元素准确的来说是键值对&…