css背景毛玻璃效果

一、结论:通过 css 的 backdrop-filter 属性设置滤镜函数 blur

一般会是有 背景色、透明度 的容器,如:

/* 宽高等其他设置这里省略没写 */
background:rgba(3, 87, 255, 0.3);
backdrop-filter: blur(10px);

在这里插入图片描述

二、backdrop-filter 的其他用法

  • backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)
  • 因为它适用于 元素背后的所有元素,为了看到效果,必须使元素或其背景 至少部分透明
  • 除了设置blur,还有其他用法
/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

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

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

相关文章

Mysql教程(四):DML学习

Mysql教程&#xff08;四&#xff09;&#xff1a;DML学习 前言 DML-介绍 DML英文全称是Data Manipulation Language数据库操作语言&#xff0c;用来对数据库中表的数据记录进行增删改查。 添加数据&#xff08;INSERT&#xff09;修改数据&#xff08;UPDATE&#xff09;删除…

走访慰问空巢老人,连接传递浓浓温情

为了弘扬中华民族尊老、敬老、爱老的优良传统&#xff0c;让老人们感受到政府和社会的温暖&#xff0c;在“端午”来临之际&#xff0c;思南县青年志愿者协会联合思南县民慈社会工作服务中心、思南县小荧星幼儿园、思南县小英豪幼儿园到大河坝镇天坝村开展“走访慰问空巢老人&a…

springboot整合eureka、config搭建注册中心和配置中心

目录 一 、springboot整合eureka实现注册中心 二、springboot整合config实现配置中心 三、从配置中心拉取配置 这篇文章详细介绍怎么通过eureka和config分别搭建一个注册中心和配置中心的服务。 一 、springboot整合eureka实现注册中心 1、创建一个springboot项目&#xff…

LRU 算法,但 get 和 put 必须 O(1),用哈希表

https://leetcode.cn/problems/lru-cache/ 题目有key、value的&#xff0c;直接就上map了 结果&#xff1a;&#x1f605; 仔细一看&#xff0c;原来要 get 和 put 必须 O(1) 只能抛弃树型数据结构了 线性的数据结构也可以吧&#xff0c;如果可以构造出一个队列&#xff0c…

Appium+python自动化(十一)- 元素定位- 下卷超详解)

1、 List定位 List故名思义就是一个列表&#xff0c;在python里面也有list这一个说法&#xff0c;如果你不是很理解什么是list&#xff0c;这里暂且理解为一个数组或者说一个集合。首先一个list是一个集合&#xff0c;那么他的个数也就成了不确定性&#xff0c;所以这里需要用复…

【InsCode Stable Diffusion 美图活动一期】生成着玩

此为内容创作模板&#xff0c;请按照格式补充内容&#xff0c;在发布之前请将不必要的内容删除 一、 Stable Diffusion 模型在线使用地址&#xff1a; https://inscode.csdn.net/inscode/Stable-Diffusion 二、模型相关版本和参数配置&#xff1a; 三、图片生成提示词与反向…

春秋云境—Initial

文章目录 春秋云境—Initial一、前期准备1、靶标介绍2、相关设备 二、WEB渗透1、ThinkPHP RCE&#xff08;1&#xff09;、打开网站&#xff08;2&#xff09;、检测漏洞 2、蚁剑连接3、sudo提权4、frpc代理5、fsacn扫描 三、后渗透1、信呼OA RCE&#xff08;1&#xff09;、1.…

npm安装依赖报错Unexpected token ‘.‘ 处理

1. 问题 在用nvm切换高版本node版本之后npm install安装项目依赖时报错如下&#xff1a; npm ERR! Unexpected token . 日志信息如下&#xff1a; 报错信息量很少&#xff0c;但是跟高版本node环境下安装依赖有关系。 2. 解决思路 安装低版本的node环境运行项目&#xff…

RabbitMQ死信交换机、TTL及延迟队列

一&#xff0c;死信交换机 1&#xff0c;什么是死信交换机 了解死信交换机之前我们先来了解一下什么是死信&#xff0c;当一个队列满足下面的三种情况的时候我们一般称为死信&#xff08;dead letter&#xff09;&#xff1a; 消费者使用basic.reject或 basic.nack声明消费失…

petalinux 无法通过SDK进行TCF调试

IP地址设置没问题 但是无法进行DEBUG 原因是没有开启debug模式&#xff0c;做下图设置重新编译程序生成BOOT.bin即可

追踪 Kubernetes 中的 DNS 查询

在过去的文章中&#xff0c;我们曾 追踪过 Kubernetes 中的网络数据包&#xff0c;这篇文章将追踪 Kubernetes 中的 DNS 查询。 让我们以在 Pod 中解析 Service 完全限定域名&#xff08;FQDN&#xff09; foo.bar.svc.cluster.local 为例。 在开始之前&#xff0c;先回顾下 …

微信小程序的目录解析--【浅入深出系列001外篇】

浅入深出系列总目录在000集 如何0元学微信小程序–【浅入深出系列000】 文章目录 本系列校训学习资源的选择先说总目录经常碰到的文件(目录&#xff09;最最常见的目录pages次最常用的就是images 目录 操作起来真正的操作 配套资源 本系列校训 用免费公开视频&#xff0c;卷…

串口wifi6+蓝牙二合一系列模块选型参考和外围电路参考设计-WG236/WG237

针对物联网数据传输&#xff0c;智能控制等应用场景研发推出的高集成小尺寸串口WiFi串口蓝牙的二合一组合模块。WiFi符合802.11a/b/g/n无线标准&#xff0c;蓝牙支持低功耗蓝牙V4.2/V5.0 BLE/V2.1和EDR&#xff0c;WiFi部分的接口是UART&#xff0c;蓝牙部分是UART/PCM 接口。模…

3Ds max图文教程:高精度篮球3D建模

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 第 1 步。使用以下设置在顶部视口上创建球体&#xff1a; 第 2 步。将球体转换为可编辑的多边形&#xff1a; 第 3 步。转到 Edge 子对象级别并剪切以下边缘&#xff1a; 第 4 步。选择以下边&#xff0c;然…

什么是 Elasticsearch 索引?

作者&#xff1a;David Brimley 索引这个术语在科技界已经被用满了。 如果你问大多数开发人员什么是索引&#xff0c;他们可能会告诉你索引通常指的是关系数据库 (RDBMS) 中与表关联的数据结构&#xff0c;它提高了数据检索操作的速度。 但什么是 Elasticsearch 索引&#xff…

Stable Diffusion配置要求,显卡推荐

Stable Diffusion 是一款流行的人工智能图像生成器&#xff0c;您可以在自己的 PC 上运行。但是运行Stable Diffusion的最低规格是多少&#xff0c;哪些组件最重要&#xff1f; Stable Diffusion需要什么 PC 硬件&#xff1f; Stable Diffusion最关键的一个组件是显卡 (GPU)。…

基于scrcpy的Android群控项目重构,获取Android屏幕元素信息并编写自动化事件

系列文章目录 基于scrcpy的远程调试方案 基于scrcpy的Android群控项目重构 基于scrcpy的Android群控项目重构 进阶版 基于scrcpy的Android群控项目重构&#xff0c;获取Android屏幕元素信息并编写自动化事件&#xff08;视频&#xff09; 基于scrcpy的Android群控项目重构…

全国节能宣传周丨物通博联智慧能源解决方案助力节能降碳

今年7月10日至16日&#xff0c;为全国第33个节能宣传周。今年全国节能宣传周活动主题是“节能降碳&#xff0c;你我同行”。 全国节能宣传周活动是在1990年国务院第六次节能办公会议上确定的活动周&#xff0c;开展该活动是实施全面节约战略、开展节能降碳宣传教育、推动形成绿…

Vue3组件间的通信方式

目录 1.props父向子组件通信 2.自定义事件 子向父组件通信 3.全局事件总线 4.v-model组件通信&#xff08;父子组件数据同步&#xff09; 绑定单个数据同步 绑定多个数据同步 5.useAttrs组件通信 6.ref与$parent ref获取子组件实例对象 $parent获取父组件实例对象 7.p…

postgresql内核分析 spinlock与lwlock原理与实现机制

​专栏内容&#xff1a; postgresql内核源码分析 手写数据库toadb 并发编程 个人主页&#xff1a;我的主页 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 概述 在postgresql 中&#xff0c;有大量的并发同步&#xff0…