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

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

news 文章来源：https://blog.csdn.net/weixin_43972437/article/details/129400847 2024/12/27 11:35:25

背景

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

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

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

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

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

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

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

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

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

安卓 Frament + ViewPager使用示例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2021牛客OI赛前集训营-提高组（第四场） 题目大意有一棵n1n1n1个节点的树，根节点为0。给你一个kkk，定义集合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

【大数据是什么】

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

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

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

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

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

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

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

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

Javascript 设计模式

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

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

JAVA-文档工具screw-gui

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

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

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

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

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

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

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

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

学习python好就业么

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

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

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

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

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

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

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

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

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

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

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

现代卷积神经网络（ResNet）

专栏：神经网络复现目录本章介绍的是现代神经网络的结构和复现，包括深度卷积神经网络（AlexNet），VGG，NiN，GoogleNet，残差网络（ResNet），稠密连接网络…...

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

PTA：L1-019 谁先倒、L1-020 帅到没朋友、L1-021 重要的话说三遍（C++）

目录 L1-019 谁先倒问题描述： L1-020 帅到没朋友问题描述： 实现代码（只过了部分）： L1-021 重要的话说三遍问题描述： 实现代码： 无解析 L1-019 谁先倒问题描述： 划拳是…...

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

STL常见容器之set/multiset、map/multimap

set/multiset—集合容器特点所有元素都会在插入时自动被排序本质 set/multiset属于关联式容器，底层结构是二叉树实现 set和multiset区别 set不可以插入重复数据，而multiset可以set插入数据的同时会返回插入结果，表示插入是否成功multiset…...

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

每个 Thread 中都存储着一个成员变量：ThreadLocalMap /** InheritableThreadLocal values pertaining to this thread. This map is* maintained by the InheritableThreadLocal class.*/ThreadLocal.ThreadLocalMap inheritableThreadLocals null; ThreadLocal 本…...

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

BUUCTF [羊城杯 2020]easyre 题解

一.查壳 64位无壳二.主函数逻辑可以得知flag长度为38,然后进行三次加密第一次加密是base64加密,得到code1 第二次加密是将code1拆成四段赋给code2 第三次加密是将code2内的数字和字母移3位,其他字符不变 str2保存的是最终的加密字符三.encode_one_base64 看到主函数…...

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

网络协议(十二)：HTTPS（SSL/TLS、TLS1.2的连接）

网络协议系列文章网络协议(一)：基本概念、计算机之间的连接方式网络协议(二)：MAC地址、IP地址、子网掩码、子网和超网网络协议(三)：路由器原理及数据包传输过程网络协议(四)：网络分类、ISP、上网方式、公网私网、NAT 网络…...

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

九九乘法表--课后程序(Python程序开发案例教程-黑马程序员编著-第3章-课后作业)

实例9：九九乘法表乘法口诀是中国古代筹算中进行乘法、除法、开方等运算的基本计算规则，沿用至今已有两千多年。古代的乘法口诀与现在使用的乘法口诀顺序相反，自上而下从“九九八十一”开始到“一一如一”为止，因此，古…...

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

在超算上安装文件树命令tree

超算平台使用的centos系统没有内置tree命令，需要通过源码安装。记录安装流程如下。 1. 下载源码包下载链接如下： http://mama.indstate.edu/users/ice/tree/ 选择“Download the latest version” 如本文下载了源码包“tree-2.1.0.tgz”. 2. 源码包…...

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

论文投稿指南——中文核心期刊推荐（经济管理）

【前言】 🚀 想发论文怎么办？手把手教你论文如何投稿！那么，首先要搞懂投稿目标——论文期刊 🎄 在期刊论文的分布中，存在一种普遍现象：即对于某一特定的学科或专业来说，少数期刊所含…...

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

在vue中如果computed属性是一个异步操作怎么办？

在计算属性中使用异步方法时，可以使用async/await来处理异步操作。由于计算属性是基于它们的依赖缓存的，所以我们需要使用一个返回Promise的异步方法来确保计算属性能够正常运行。下面是一个简单的示例，演示如何在计算属性中使用异步方法&am…...

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

石家庄站在哪个区/武汉seo优化代理

2014-08-09 13:58:00　来源: 虎嗅网(北京)　有0人参与去年冬天，有一家在全球各地拥有上百万用户的流媒体公司，需要将其应用软件在100多种不同的设备上进行强度测试。为此，该公司采用了一款小工具，称为Applause。当时，他…...

编程日记 2024/12/27 7:43:51

做网站创业流程/seo网站诊断方案

### :-: **亿乐社区**### 1、打开网站网站：[http://www.124sq.cn/](http://www.124sq.cn/)有账号的直接登录，没有账号的注册一个### 2、选择商品ID在左侧目录栏选一个，这里选择的是刷名片赞专区 ，然后选择一个商品点开![](https:/…...

编程日记 2024/12/27 4:58:50