当前位置： 首页 > news >正文

css：使用filter和backdrop-filter实现高斯模糊效果

news 2025/7/13 14:57:23

背景

今天接到一个需求是，使用高斯模糊的效果对一个页面进行模糊处理，正好借这个机会来整理一下 css3 中高斯模糊的两个 API

API介绍

filter

说明：
该 API 是一个过滤器，不仅能实现高斯模糊，还有很多比如颜色偏移、饱和度、灰度等等

语法：

// 使用空格分隔多个滤镜
filter: none;
// 高斯模糊
filter: blur(4px);
// 线性亮度
filter: brightness();
// 对比度
filter: contrast();
// 阴影效果
filter: drop-shadow();
// 灰度
filter: grayscale();
// 色相旋转
filter: hue-rotate();
// 反转图像
filter: invert();
// 转换透明度
filter: opacity();
// 饱和度
filter: saturate();
// 褐色
filter: sepia();
// SVG滤镜
filter: url();

其中高斯模糊 filter: blur();

backdrop-filter

说明：
当你创造一个元素加上这个属性后，会使得这个元素后面的区域添加效果（如模糊或颜色偏移）

对比：
filter 属性必须要加载图像上或者背景图上，而 backdrop-filter 只要是一个元素就可以。

语法：

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

示例

filter例一

<!DOCTYPE html>
<html lang="en"><head><style>.wrapBox2 {width: 800px;height: 300px;overflow: hidden;position: relative;background-image: url("./win.jpeg");background-size: 100% 100%;background-repeat: no-repeat;filter: blur(10px);}.subBox {position: absolute;width: calc(100% - 100px);height: calc(100% - 100px);z-index: 2;}.text {position: relative;/* z-index: 10; */font-size: 40px;font-weight: bold;color: #f00;}</style></head><body><div class="wrapBox2"><div class="subBox"></div><div class="text">全部模糊</div></div></body>
</html>

在这里插入图片描述
这里要注意的一点是，添加模糊后，实际的大小会超出我们设置的宽高，因为周围的毛边效果，你可以在外面包一层并设置 overflow: hidden;

filter例二

<!DOCTYPE html>
<html lang="en"><head><style>.wrapBox2 {width: 800px;height: 300px;/* overflow: hidden; */position: relative;}.subBox {width: 100%;height: 100%;position: absolute;width: calc(100% - 100px);height: calc(100% - 100px);z-index: 2;filter: blur(10px);}.text {position: relative;/* z-index: 10; */font-size: 40px;font-weight: bold;color: #f00;}</style></head><body><div class="wrapBox2"><img src="./win.jpeg" class="subBox" /><div class="text">全部模糊</div></div></body>
</html>

在这里插入图片描述
这种方式的话，文字和图片由于是平级的，所以文字要么在图片下方，要么在上方（根据z-index来控制），而不会对文字进行模糊。

backdrop-filter例一

<!DOCTYPE html>
<html lang="en"><head><style>.wrapBox2 {width: 800px;height: 300px;overflow: hidden;position: relative;background-image: url("./win.jpeg");background-size: 100% 100%;background-repeat: no-repeat;}.subBox {position: absolute;width: calc(100% - 100px);height: calc(100% - 100px);z-index: 2;backdrop-filter: blur(10px);/* top: 100px; */}.text {position: relative;/* z-index: 10; */font-size: 40px;font-weight: bold;color: #f00;}</style></head><body><div class="wrapBox2"><div class="subBox"></div><div class="text">部分模糊</div></div></body>
</html>

在这里插入图片描述
可以看到，backdrop-filter 属性不必设置在一个图片元素上面，而是任何元素上面就行，这种方式我觉得更加灵活

总结

  • 如果只是模糊一张图片，那么直接用 filter 就可以实现。
  • 如果想要用一个模糊蒙层盖住html页面/图片的某一部分，那么使用 backdrop-filter。

当然，使用 backdrop-filter 也可以满足第一种场景。

相关文章：

css：使用filter和backdrop-filter实现高斯模糊效果

背景 今天接到一个需求是&#xff0c;使用高斯模糊的效果对一个页面进行模糊处理&#xff0c;正好借这个机会来整理一下 css3 中高斯模糊的两个 API API介绍 filter 说明&#xff1a; 该 API 是一个过滤器&#xff0c;不仅能实现高斯模糊&#xff0c;还有很多比如颜色偏移、…...

编程日记 2023/4/25 22:47:33

科技大势怎么看 2023怎么干？

2023年&#xff0c;科技的走向依旧是世界各国的关注重点&#xff0c;各国在纷纷设立自己的科技战略目标外&#xff0c;还在潜心研究不同技术领域的科技趋势&#xff0c;试图通过科技占据国际竞争的制高点。 随着我国深入实施创新驱动发展战略&#xff0c;推动产业结构优化升级&…...

编程日记 2023/4/25 22:47:27

盘点曾经很火但消失了的8个软件

目录 1、飞信 3、暴风影音 4、千千静听 5、虾米音乐 6、快车下载 7、人人网 8、QQ农场 今天小编给大家分享曾经很火但消失了的8个软件&#xff0c;你都用过吗&#xff1f; 1、飞信 飞信是中国移动通信集团公司推出的一款短信、语音、视频通信应用程序。它于2007年推出&a…...

编程日记 2023/4/25 3:02:42

安卓 Frament + ViewPager使用示例

1. 组成架构 整个架构被包在一个外部Fragment之中&#xff0c;也可以放在一个Activity之中&#xff0c;随意。外部的fragment包含了两个组件&#xff0c;即途中的ViewPager和TabLayoutViewPager要套上一个FragmentStatePagerAdapter &#xff0c;适配器负责new出一个个fragment…...

编程日记 2023/4/25 22:47:23

【银行测试】必看的四类题型：这可是最经典的一套题目了

目录&#xff1a;导读 一、根据题目要求写出具体LINUX操作命令 二、JMETER题目 三、根据题目要求写出具体SQL语句 四、测试案例设计题 金三银四面试面对大厂面试官提问&#xff0c;如何回答&#xff1a;花3天背完这100道软件测试面试题&#xff01;银行测试的offer还不是手…...

编程日记 2023/4/25 22:47:20

跨源资源共享（CORS）-亲测理解，以及对http的状态，参数的理解和使用，对预检请求的触发和解决

跨源资源共享&#xff08;CORS&#xff09;-亲测理解&#xff0c;以及对http的状态&#xff0c;参数的理解和使用 跨源资源共享&#xff08;CORS&#xff0c;或通俗地译为跨域资源共享&#xff09;是一种基于HTTP 头的机制&#xff0c;该机制通过允许服务器标示除了它自己以外的…...

编程日记 2023/4/25 22:47:17

学生使用的台灯该怎么选择？2023适合学生房间的灯推荐

随着社会的进步发展&#xff0c;我们的生活水平越来越高&#xff0c;很多家庭的孩子都开始使用台灯这种家居产品&#xff0c;对于学习任务繁重的他们来说&#xff0c;台灯确实可以起到保护眼睛、提高学习专注度的作用。那么不知道朋友们是否了解过&#xff0c;台灯该怎么选择呢…...

编程日记 2023/4/25 22:47:15

23种设计模式-桥接模式（安卓应用场景介绍）

概念 桥接模式是一种结构型设计模式&#xff0c;它通过将抽象与其实现分离来解耦。它使用接口&#xff08;抽象类&#xff09;作为桥梁&#xff0c;将一个抽象类与其实现类的代码分别独立开来&#xff0c;从而使它们可以各自独立地变化。桥接模式的核心思想是“组合优于继承”…...

编程日记 2023/4/25 22:47:12

2021牛客OI赛前集训营-提高组（第四场） T3快速访问

2021牛客OI赛前集训营-提高组&#xff08;第四场&#xff09; 题目大意 有一棵n1n1n1个节点的树&#xff0c;根节点为0。给你一个kkk&#xff0c;定义集合Si{j∈Z∣max⁡(1,i−k)≤j<i}∪{0}S_i\{j\in Z|\max(1,i-k)\leq j<i\}\cup\{0\}Si​{j∈Z∣max(1,i−k)≤j<i…...

编程日记 2023/4/25 22:47:09

【大数据是什么】

大数据是什么大数据是做什么的&#xff1f;大数据主要有哪些职位 &#xff1f;大数据运维工程师数据仓库开发工程师ETL工程师大数据开发工程师BI工程师算法工程师大数据平台开发工程师大数据架构师讲述一下自己的大数据学习之路大数据是做什么的&#xff1f; 2014年&#xff0c…...

编程日记 2023/4/25 22:47:06

大数据 | centos7图形界面无法执行yum命令

大家好&#xff0c;今天是三八女神节了&#xff01; 你知道吗&#xff1f;世界上第一位电脑程序设计师是名女性&#xff0c;Ada Lovelace (1815-1852)。 她是一位英国数学家兼作家&#xff0c;第一位主张计算机不只可以用来算数的人&#xff0c;也发表了第一段分析机用的演算…...

编程日记 2023/4/25 22:47:04

三维人脸实践：基于Face3D的渲染、生成与重构 ＜一＞

face3d: Python tools for processing 3D face git code: https://github.com/yfeng95/face3d paper list: PaperWithCode 该方法广泛用于基于三维人脸关键点的人脸生成、属性检测&#xff08;如位姿、深度、PNCC等&#xff09;&#xff0c;能够快速实现人脸建模与渲染。推荐…...

编程日记 2023/4/25 22:47:01

Javascript 设计模式

设计模式的五大设计原则(SOLID)单一职责&#xff1a;一个程序只需要做好一件事。如果功能过于复杂就拆分开&#xff0c;保证每个部分的独立开放封闭原则:对扩展开放&#xff0c;对修改封闭。增加需求时&#xff0c;扩展新代码&#xff0c;而不是修改源代码。这是软件设计的终极…...

编程日记 2023/4/25 22:46:58

JAVA-文档工具screw-gui

前言 为什么萌生了写文档工具得想法&#xff0c;因为在项目开发得过程中&#xff0c;经常需要补充一些文档&#xff0c;比如数据库文档、详细设计文档等等&#xff0c;文档与项目相绑定&#xff0c;在项目需求新增或变更时&#xff0c;文档也需要反反复复得修改。 1. 数据库…...

编程日记 2023/4/25 22:46:55

开源鸿蒙南向嵌入学习笔记——NAPI框架学习（一）

开源鸿蒙南向嵌入学习笔记——NAPI框架学习&#xff08;一&#xff09; 前言——系列介绍 本系列文章主要是记录笔者在鸿蒙南向的学习与工作中的知识点笔记记录&#xff0c;其中不止会针对鸿蒙中的学习问题进行思考与记录&#xff0c;也会对涉及到的一些嵌入式等其他领域知识&…...

编程日记 2023/4/25 22:46:52

Spring - Spring框架概述面试题总结

文章目录01. 什么是Spring&#xff1f;02. Spring框架的设计目标&#xff0c;设计理念&#xff0c;和核心是什么&#xff1f;03. Spring的优点是什么&#xff1f;04. Spring框架中都用到了哪些设计模式&#xff1f;05. Spring有哪些应用场景?06. Spring由哪些模块组成&#xf…...

编程日记 2023/4/25 22:46:50

学习python好就业么

Python的普及与数据挖掘、人工智能和数值计算等领域的蓬勃发展相关&#xff0c;但同时也与普遍编程需求的增加有关。 Python作为人工智能的头号语言&#xff0c;一方面会吸引大量计划从事人工智能的人来学习&#xff0c;另一方面自然也带动了网络上对这门“新语言”的关注和讨…...

编程日记 2023/4/25 22:46:47

瑞幸咖啡的最终目标并不是做国内市场大哥

出品 | 何玺 排版 | 叶媛 日前&#xff0c;瑞幸咖啡发布2022年第四季度及全年财报。数据显示&#xff0c;在刚刚过去的2022年&#xff0c;瑞幸咖啡首次实现了营收超百亿&#xff0c;门店规模也超越老对手星巴克&#xff0c;成为了国内第一连锁咖啡品牌。 那么&#xff0c;瑞幸…...

编程日记 2023/4/25 22:46:44

GPT 模型介绍 | GPT3 / GPT3.5 + Flask | Github源码链接

1. 模型介绍 Chatgpt 使用与 InstructGPT相同的方法&#xff0c;使用来自人类反馈的强化学习 (RLHF) 来训练该模型&#xff0c;但数据收集设置略有不同。我们使用监督微调训练了一个初始模型&#xff1a;人类 AI 训练员提供对话&#xff0c;他们在对话中扮演双方——用户和 AI…...

编程日记 2023/4/25 22:46:42

蓝桥杯入门即劝退（二十六）组合问题（回溯算法）

-----持续更新Spring入门系列文章----- 如果你也喜欢Java和算法&#xff0c;欢迎订阅专栏共同学习交流&#xff01; 你的点赞、关注、评论、是我创作的动力&#xff01; -------希望我的文章对你有所帮助-------- 专栏&#xff1a;蓝桥杯系列 一、题目描述 给定两个整数 n …...

编程日记 2023/4/25 22:46:39

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/6/18 8:29:05

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/7/9 3:43:22

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/6/19 5:45:52

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/7/13 4:39:01

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/7/12 4:41:38

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/7/11 5:34:58

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/7/12 12:03:31

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/6/16 22:53:40

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/7/11 10:41:24

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/7/9 13:55:24