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

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

news 2026/1/31 21:18:29

背景

今天接到一个需求是，使用高斯模糊的效果对一个页面进行模糊处理，正好借这个机会来整理一下 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

鸿蒙中用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/11/1 8:36:48

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/30 13:02:14

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2026/1/28 3:04:35

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2026/1/31 6:50:52

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2026/1/29 21:23:20

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...

编程新知 2025/11/28 7:53:17

aardio 自动识别验证码输入

技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”&#xff0c;于是尝试整合图像识别与网页自动化技术&#xff0c;完成了这套模拟登录流程。核心思路是&#xff1a;截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...

编程新知 2026/1/26 19:52:43

MeshGPT 笔记

[2311.15475] MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers https://library.scholarcy.com/try 真正意义上的AI生成三维模型MESHGPT来袭&#xff01;_哔哩哔哩_bilibili GitHub - lucidrains/meshgpt-pytorch: Implementation of MeshGPT, SOTA Me…...

编程新知 2026/1/19 5:19:20