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%);

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

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

相关文章

ASL/CS系列音视频转换方案芯片,Typec拓展坞方案芯片

音视频单转方案芯片&#xff1a; CS5565 Typec转HDMI 8K 60HZ转换方案 可替代RTD2173 PS196 CS5801 HDMI转eDP/DP方案 可替代LT6711 CS5212 DP转VGA转换方案 可PIN TO PIN 替代RTD2166 CS5211 E…

《红蓝攻防构建实战化网络安全防御体系》读书笔记

作者&#xff1a;奇安信安服团队 ◆ 1.3 红队 各个团队在演练中的角色与分工情况如下。目标系统运营单位&#xff1a;负责红队整体的指挥、组织和协调。安全运营团队&#xff1a;负责整体防护和攻击监控工作。攻防专家&#xff1a;负责对安全监控中发现的可疑攻击进行分析和研…

vue写车牌号 自定义键盘

vue写车牌号自定义键盘 <template><div><div class"content-wrapper"><div class"content-top-wrapper"><van-radio-group v-model"radioCarType"><van-radio name"1">蓝牌<imgslot"icon…

前端学习笔记:JavaScript基础语法(ECMAScript)

此博客参考b站&#xff1a;【黑马程序员前端JavaScript入门到精通全套视频教程&#xff0c;javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p76&vd_source06e5549bf018e111f4275c259292d0da 这份笔记适用于已…

ETHERNET/IP转TCP/IP网关tcp/ip协议包含哪几层

大家好&#xff0c;今天我们将带大家了解一款自主研发的通讯网关&#xff0c;远创智控YC-EIP-TCP/IP。这是一个强大的工具&#xff0c;能帮助我们将ETHERNET/IP网络和TCP/IP网络连接在一起&#xff0c;让我们更好地管理和监控网络。 1, 首先&#xff0c;让我们来看看这款网关…

Html基础知识学习——圣杯布局、margin负值、等高布局(十七)

文章目录 圣杯布局margin负值等高布局 圣杯布局 两边页面固定中间页面宽度随着浏览器大小自适应 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-widt…

Django中使用反向关系名称(related_name)解决由“多对多”关系引起的字段名字冲突问题引起的迁移命令报错。

当在模型中为关系字段添加了related_name参数后&#xff0c;您可以使用该参数指定的名称来引用反向关系。下面是一个简单的例子来说明如何引用反向关系。 假设您有以下两个模型&#xff1a; from django.db import modelsclass Author(models.Model):name models.CharField(…

十八、Unity游戏引擎入门

1、下载 首先需要下载Unity Hub,下载网址:https://unity.com/cn。 然后在其中下载Unity编辑器并安装,可选择最新版本。 接着需要选择适合的开发环境,例如Android Studio或Xcode,以便进行手机游戏开发。在安装完Unity后,需要根据项目需求下载对应的模块和插件…

php 开发微信 h5 支付 APIv3 接入超详细流程

✨ 目录 &#x1f388; 申请商户号&#x1f388; 申请商户证书&#x1f388; 设置V3密钥&#x1f388; 开通H5支付&#x1f388; 设置支付域名&#x1f388; SDK 下载&#x1f388; 第一次下载平台证书&#x1f388;非第一次下载平台证书&#x1f388; H5下单 &#x1f388; 申…

CentOS7中安装docker并配置阿里云加速器

文章目录 一、docker的安装二、docker的卸载三、配置加速器四、docker-compose安装五、docker-compose卸载六、docker-compose相关命令七、常用shell组合 一、docker的安装 参考&#xff1a;https://docs.docker.com/engine/install/centos 本文内容是基于&#xff1a;CentOS L…

管理软件开发平台:用科技提升数据治理能力,实现流程化办公!

如果实现流程化办公&#xff0c;想必是很多企业心心念念的发展愿望。但是&#xff0c;如何实现&#xff1f;利用什么样的平台可以完成这一目标&#xff1f;这是很多人值得深思的问题之一。管理软件开发平台实行100%全源码开放&#xff0c;是轻量级、可视化低代码开发平台&#…

Python Web框架 Flask 安装、使用

Python Web框架 Flask 安装 安装 Flask 框架 首先需要安装 Flask 框架, 可以通过以下命令安装: [rootlocalhost web]# pip3 install Flask Collecting FlaskDownloading Flask-2.0.3-py3-none-any.whl (95 kB)|██████████████████████████████…

【Visual Studio Code】---自定义键盘快捷键设置

概述 一个好的文章能够帮助开发者完成更便捷、更快速的开发。书山有路勤为径&#xff0c;学海无涯苦作舟。我是秋知叶i、期望每一个阅读了我的文章的开发者都能够有所成长。 一、进入键盘快捷键设置 1、进入键盘快捷键设置方法1 使用快捷键进入键盘快捷键设置先按 Ctrl K再…

基于springboot的企业员工工资管理系统(财务系统)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

php实现站群软件权限管理功能示例

1.管理员页面RBAC.php <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>权限管理</title> <script src"bootstrap/js/jquery-1.11.2.min.js"></script> </head>…

计算机网络 day11 tcpdump - 传输层 - netstat - socket - nc - TCP/UDP头部

目录 故障排查 tcpdump抓包工具 传输层&#xff08;TCP和UDP协议&#xff09; 传输层的作用 应用程序和端口号有什么关系&#xff1f; 传输层端对端连接实现拓扑图 如何查看自己的linux机器开放了哪些端口&#xff1f; 1、netstat(network status 网络的状态) netsta…

安卓APK反编译+修改+重打包+签名

目录 1.下载反编译工具包。2.将APK包&#xff0c;重命名为ZIP&#xff0c;解压。放到反编译根目录下。3.使用apktool反编译修改smail文件&#xff0c;进行重打包4.重新打包5.重签名 1.下载反编译工具包。 反编译工具包地址&#xff1a;百度网盘 提取码&#xff1a;dsu3 解压后…

传智教育成功入选教育部2023年产学合作协同育人项目

传智教育成功入选教育部2023年产学合作协同育人项目 近日&#xff0c;教育部产学合作协同育人项目专家组发布《关于公布教育部产学合作协同育人项目指南通过企业名单&#xff08;2023年5月&#xff09;的通知》&#xff0c;传智教育申报的“教学内容和课程体系改革项目 、师资…

标注工具Labelimg,正常运行显示,但是对图片点击Create RectBox画矩形框开始闪退

问题描述*&#xff1a;标注工具Labelimg&#xff0c;正常运行显示&#xff0c;但是对图片点击Create RectBox画矩形框开始闪退&#xff0c;闪退出现以下代码 File “C:\ProgramData\anaconda3\Lib\site-packages\libs\canvas.py”, line 530, in paintEvent p.drawLine(self.p…