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

css backdrop-filter 实现背景滤镜

news 2025/10/21 22:28:59

官方给出的定义是：backdrop-filter属性允许您将图形效果（如模糊或颜色偏移）应用于元素后面的区域。因为它适用于元素后面的所有内容，所以要查看元素或其背景的效果，需要透明或部分透明。

大致分为以下10种：

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

根据上述10种，做了一张汇总图

 

同样直接贴一下源码吧

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>backdrop-filter</title><style>h3{text-align: center;}.container {display: flex;justify-content: flex-start;flex-wrap: wrap;}.box {position: relative;width: 20%;height: 200px;vertical-align: middle;border: 5px solid #FFFFFF;box-sizing: border-box;background: url('img/bg.png') no-repeat top;background-size: auto;}p {margin: 100px auto;color: #FFBB00;font-weight: bold;text-align: center;padding: 10px 0;background-color: transparent;}.box:nth-child(1) p {backdrop-filter: blur(10px);}.box:nth-child(2) p {backdrop-filter: brightness(60%);}.box:nth-child(3) p {backdrop-filter: contrast(40%);}.box:nth-child(4) p {backdrop-filter: drop-shadow(1px 1px 10px blue);}.box:nth-child(5) p {backdrop-filter: grayscale(60%);}.box:nth-child(6) p {backdrop-filter: hue-rotate(120deg);}.box:nth-child(7) p {backdrop-filter: invert(70%);}.box:nth-child(8) p {backdrop-filter: opacity(10%);}.box:nth-child(9) p {backdrop-filter: sepia(90%);}.box:nth-child(10) p {backdrop-filter: saturate(20%);}</style>
</head>
<body>
<h3>backdrop-filter属性各类值的效果</h3>
<div class="container"><div class="box"><p>模糊<br/>backdrop-filter: blur(10px)</p></div><div class="box"><p>亮度<br/>backdrop-filter: brightness(60%)</p></div><div class="box"><p>对比度<br/>backdrop-filter: contrast(40%)</p></div><div class="box"><p>下降阴影<br/>backdrop-filter: drop-shadow(4px 4px 100px blue)</p></div><div class="box"><p>灰度<br/>backdrop-filter: grayscale(60%)</p></div><div class="box"><p>色调旋转<br/>backdrop-filter: hue-rotate(120deg)</p></div><div class="box"><p>反转<br/>backdrop-filter: invert(70%)</p></div><div class="box"><p>不透明度<br/>backdrop-filter: opacity(20%)</p></div><div class="box"><p>深褐色<br/>backdrop-filter: sepia(90%)</p></div><div class="box"><p>饱和<br/>backdrop-filter: saturate(20%)</p></div>
</div>
</body>
</html>

相关文章：

css backdrop-filter 实现背景滤镜

官方给出的定义是&#xff1a;backdrop-filter属性允许您将图形效果&#xff08;如模糊或颜色偏移&#xff09;应用于元素后面的区域。因为它适用于元素后面的所有内容&#xff0c;所以要查看元素或其背景的效果&#xff0c;需要透明或部分透明。 大致分为以下10种&#xff1a…...

编程日记 2024/5/12 22:49:51

AR人脸道具SDK解决方案，实现道具与人脸的自然融合

AR人脸道具SDK解决方案&#xff0c;实现道具与人脸的自然融合美摄科技以其卓越的技术实力和创新能力&#xff0c;为企业带来了全新的AR人脸道具SDK解决方案。这一解决方案将为企业打开全新的市场机会&#xff0c;为用户带来前所未有的互动体验。 颠覆传统&#xff0c;开启AR人…...

编程日记 2024/5/12 22:48:50

Windows安装RabbitMQ教程(附安装包)

需要两个安装包 Erlang 安装包: https://download.csdn.net/download/Brevity6/89274663 (自己从官网下载也可以) RabbitMQ Windows 安装包&#xff1a; https://download.csdn.net/download/Brevity6/89274667 (自己从官网下载也可以) Erlang安装 Erlang安装傻瓜式下一…...

编程日记 2024/5/12 22:47:49

这个问题无人能解，菜鸟勿进

前言 这是陈旧已久的草稿2021-06-23 23:25:12 现在2024-5-12 21:53:46&#xff0c;发布到[逻辑题]专栏中。 一、问题 1.描述&#xff1a; 在我的世界中建个红石电路 2.需求&#xff1a; 五个灯A、B、C、D、E、F 五个开关a、b、c、d、e、f、总开关 3.要求&#xff1a; 总开关…...

编程日记 2024/5/12 22:45:47

揭秘高效引流获客的艺术：转化技巧大公开

在数字化营销的海洋中&#xff0c;每个企业都如同一艘努力航行的船&#xff0c;而流量便是推动船只前行的风帆。如何有效吸引并获取潜在客户&#xff0c;即所谓的“引流获客”&#xff0c;已成为企业市场营销策略中不可或缺的一环。本文将详细探讨几种实用且高效的引流获客技巧…...

编程日记 2024/5/12 22:44:46

【Unity 鼠标输入检测】

Unity 鼠标输入检测 Unity提供了多种方法来检测和处理鼠标输入&#xff0c;允许开发者在游戏中实现对鼠标移动、点击和滚轮滚动的响应。以下是一些基本的鼠标输入检测方法&#xff1a; 1. Input.mousePosition 这个属性返回当前鼠标指针的屏幕坐标。坐标是以像素为单位的&…...

编程日记 2024/5/12 22:43:45

LeetCode hot100-33-Y

148. 排序链表 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 这题能通过但是投机取巧了&#xff0c;一般应该不能这样做&#xff0c;直接把节点里的值拿出来&#xff0c;排序后再更新每个节点的值。 /*** Definition for singly-linked list.* p…...

编程日记 2024/5/12 22:42:44

C++和Python通信引文道路社评电商大规模行为图结构数据模型

&#x1f3af;要点 &#x1f3af;图论数学逻辑和计算&#xff1a;&#x1f58a;定向网络节点和边 | &#x1f58a;节点的入度 | &#x1f58a;出度和度 | &#x1f58a;源节点 | &#x1f58a;汇节点 | &#x1f58a; 孤立节点 | &#x1f58a;入度分布和出度分布 | &#x1f…...

编程日记 2024/5/12 22:41:42

单片机-点亮第一盏灯

原理图 需求&#xff1a;点亮或是熄灭LED 通过控制 P5.3引脚输出高电平时&#xff0c;LED灯就点亮&#xff0c;输出低电平时LED灯就熄灭 1.项目创建 新建项目 配置开发板信息 当前位STC芯片的开发板&#xff0c;选择STC MCU Database 搜素具体芯片型号&#xff0c;进行配置…...

编程日记 2024/5/12 22:39:40

C++组合类

类的数据成员不但可以是基本类型&#xff0c;也可以是其它类的对象。 组合类就是指一个类包含其他类的对象作为该类的数据成员。 当组合类创建对象时&#xff0c;其中包含的各个数据成员对象应首先被创建。因此&#xff0c;在创建类的对象时&#xff0c;既要对本类的基本…...

编程日记 2024/5/12 22:37:37

Linux学习笔记3

建立最小linux系统【续】 书接上文&#xff0c;上一篇我们分析了rcS和ifconfig-eth0文件&#xff0c;接下来我们继续讲下去 passwd文件 之后在init.d的上一级目录etc下建立passwd文件&#xff0c;内容如下 root::0:0:root:/:/bin/sh bin:*:1:1:bin:/bin:daemon:*:2:2:daemo…...

编程日记 2024/5/12 22:32:32

免费证件照一键换底色

最近星期天在家搞了一个小工具&#xff0c;在这里分享下! 废话不多说看看效果&#xff1a; 效果还不错&#xff0c;需要的可以联系我!!!!!!!!! 别的网上可都是一次五块钱这种。太贵了。。&#xff01;&#xff01;...

编程日记 2024/5/12 22:29:29

使用 FFmpeg 从音视频中提取音频

有时候我们需要从视频文件中提取音频&#xff0c;并保存为一个单独的音频文件&#xff0c;我们可以借助 FFmpeg 来完成这个工作。 一、提取音频&#xff0c;保存为 mp3 文件: 要使用 FFmpeg 从音视频文件中提取音频&#xff0c;并将 ACC 编码的音频转换为 MP3 格式&#xff0…...

编程日记 2024/5/12 22:28:27

GraphQL在现代Web应用中的应用与优势

GraphQL是一种现代的API查询语言&#xff0c;它在现代Web应用中得到了广泛的应用&#xff0c;因为它提供了一种高效、灵活且强大的方式来获取数据 GraphQL基础快速应用示例&#xff1a; 1. 后端设置&#xff08;使用graphql-yoga&#xff09; 首先&#xff0c;我们需要创建一…...

编程日记 2024/5/12 22:27:26

socket编程 学习笔记 理解

在使用socket&#xff08;也就是套接字&#xff09;编程的时候&#xff0c;其实是工作于应用层和传输层之间 如果使用的是基于TCP的socket&#xff0c;那每个数据包的发送的过程大致为&#xff1a; 数据通过socket套接字构造符合TCP协议的数据包在屏蔽底层协议的情况下&#…...

编程日记 2024/5/12 22:26:25

SC-Lego-LOAM建图与ndt_localization的实车实现

参考&#xff1a;https://blog.csdn.net/weixin_44303829/article/details/121524380 https://github.com/AbangLZU/SC-LeGO-LOAM.git https://github.com/AbangLZU/ndt_localizer.git 将建图和定位分别使用lego-loam和ndt来进行&#xff0c;实车上的效果非常不错&#xff0c;…...

编程日记 2024/5/12 22:23:21

vs code中如何使用git

由于本地代码有了一些储备&#xff0c;所以想通过网址托管形式&#xff0c;之前一直使用了github&#xff0c;但是鉴于一直被墙&#xff0c;无法登录账号&#xff0c;所以选择了国内的gitee来作为托管网站。 gitee的网址&#xff1a;Gitee - 基于 Git 的代码托管和研发协作平台…...

编程日记 2024/5/12 22:18:15

Vue项目中如何通过配置修改项目名称

Vue项目中如何通过配置修改项目名称 前言 部分vue项目中为了不直接修改 index.html 文件而使用 config 配置文件进行修改&#xff0c;好处就是项目配置比较集中好管理、可实现动态化修改。 具体配置和使用 项目中 index.html 配置标题名&#xff0c;可以看到 <title>…...

编程日记 2024/5/12 22:16:13

ThinkPHP5.1 创建控制器类

在ThinkPHP中&#xff0c;控制器是MVC模式中的核心组件之一&#xff0c;负责接收用户请求并处理相应的业务逻辑。在本篇技术博客中&#xff0c;我们将深入探讨ThinkPHP5.1中的控制器操作&#xff0c;包括创建控制器、路由绑定、请求参数获取等方面的知识点。 1.创建控制器 在T…...

编程日记 2024/5/12 22:14:11

完全背包问题(c++)

完全背包问题 当前有 N 种物品&#xff0c;第 i 种物品的体积是 ci​&#xff0c;价值是 wi​。 每种物品的数量都是无限的&#xff0c;可以选择任意数量放入背包。 现有容量为 V 的背包&#xff0c;请你放入若干物品&#xff0c;使总体积不超过 V&#xff0c;并且总价值尽可…...

编程日记 2024/5/12 22:13:09

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/10/15 3:54:35

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/10/14 12:39:26

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/9/22 20:53:03

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/10/21 17:52:52

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/10/20 17:43:47

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2025/9/28 3:39:01

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2025/10/18 16:41:42

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

编程新知 2025/9/10 21:14:06

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

编程新知 2025/10/7 3:17:39