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

CSS：filter滤镜 详解（用法 + 代码 + 例子 + 效果）

news 2026/2/10 16:26:13

文章目录

  • filter 滤镜
    • blur() 模糊度
      • 例子 渐变光晕
    • brightness() 元素亮度
    • contrast() 对比度
    • grayscale() 元素灰度
    • hue-rorate() 色相
    • opacity() 透明度
    • invert() 反转颜色
    • saturate() 饱和度
  • backdrop-filter 蒙版，滤镜
    • 例子 卷轴展开

filter 滤镜

动图为效果添加前后对比。
经常用ps的应该知道这些的属性的含义，可以自己试一试看看不同参数都有什么样的效果。

blur() 模糊度

作用是调整模糊度，单位像素。

filter: blur(10px);

在这里插入图片描述

例子 渐变光晕

其实是两个相同的div叠加，其中一个加上了模糊度。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}body{display: flex;height:100vh;justify-content: center;align-items: center;background: #000;}.box{width:300px;height: 400px;background: linear-gradient(30deg,#3498db,#9b59b6);border-radius: 5px;position: relative;}.box::before{content:"";width:120%;height: 120%;position: absolute;background: red;z-index: -1;top:-10%;left:-10%;background: linear-gradient(30deg,#3498db,#9b59b6);filter:blur(70px);}</style>
</head>
<body><class class="box"></class>
</body>
</html>

brightness() 元素亮度

作用是调整元素的亮度，单位百分数或小数，小于1暗，大于亮。

filter: brightness(0.5);

在这里插入图片描述

contrast() 对比度

作用是调整元素的对比度，单位是百分数。
大于1提高对比度，小于1降低对比度。
这里加个图片吧，更好的展示此效果。

filter: contrast(2);

在这里插入图片描述

grayscale() 元素灰度

作用是调整元素的灰度，单位是百分数。
最大是百分之百。
网站需要在特殊节日变成灰色就可以给body加上这个属性。 让整个网站变成灰色调。

filter: grayscale(1);

在这里插入图片描述

hue-rorate() 色相

调整元素的色相，单位是角度。

filter: hue-rotate(80deg);

在这里插入图片描述

opacity() 透明度

调整元素的透明度，单位是百分数。

filter: opacity(0.5);

在这里插入图片描述

invert() 反转颜色

invert() 调整元素的反转输入颜色，单位是百分数。

filter: invert(1);

在这里插入图片描述

saturate() 饱和度

改变图像饱和度。值为 0% 则是完全不饱和，值为 100% 则图像无变化。超过 100% 则增加饱和度。

filter: saturate(2);

在这里插入图片描述

backdrop-filter 蒙版，滤镜

与filter用法相同，只不过其是对其后面元素起作用的。
可以理解为filter作用于物体，而backdrop-filter相当于一个幕布，遮住的才会变化。还是不理解没关系，看下面的例子就明白了。

例子 卷轴展开

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}body{display: flex;height:100vh;justify-content: center;align-items: center;}.box{display: flex;width:60%;object-fit: cover;object-position: center top;position: relative;}.box img{height:600px;width:100%;object-fit: cover;}.box::before{content:"";width:100%;height: 100%;background: rgb(255, 255, 255, 0.4);position: absolute;right:0; backdrop-filter: blur(10px);border-left: 5px solid #000;transition: 5s ease;}.box:hover::before{width: 0;border-left: 10px solid #000;}</style>
</head>
<body><div class="box"><img src="1.jpg" alt=""></div>
</body>
</html>

相关文章：

CSS：filter滤镜 详解（用法 + 代码 + 例子 + 效果）

文章目录 filter 滤镜blur() 模糊度例子 渐变光晕 brightness() 元素亮度contrast() 对比度grayscale() 元素灰度hue-rorate() 色相opacity() 透明度invert() 反转颜色saturate() 饱和度 backdrop-filter 蒙版&#xff0c;滤镜例子 卷轴展开 filter 滤镜 动图为效果添加前后对…...

编程日记 2023/8/20 0:12:29

【Unity每日一记】Physics.Raycast 相关_Unity中的“X光射线”

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…...

编程日记 2023/8/20 0:11:28

软件报错msvcr90.dll丢失的解决方法，亲测可以修复

我曾经遇到过一个令人头疼的问题&#xff1a;msvcr90.dll丢失。这个问题导致了我的程序无法正常运行&#xff0c;让我感到非常苦恼。然而&#xff0c;在经过一番努力后&#xff0c;我终于成功地修复了这个问题&#xff0c;这让我感到非常欣慰和满足。 msvcr90.dll丢失的原因可能…...

编程日记 2023/8/20 0:10:27

第一百一十八回 如何获取蓝牙连接状态

文章目录 知识回顾实现方法示例代码我们在上一章回中介绍了如何连接蓝牙设备相关的内容，本章回中将介绍如何获取蓝牙连接状态.闲话休提，让我们一起Talk Flutter吧。 知识回顾 我们在上一章回中介绍如何连接蓝牙设备，但是如何知道蓝牙设备是否连接成功呢？这就需要我们去获取…...

编程日记 2023/8/20 0:09:25

C++11并发与多线程笔记（12） windows临界区、其他各种mutex互斥量

C11并发与多线程笔记&#xff08;12&#xff09; windows临界区、其他各种mutex互斥量 1、windows临界区2、自动析构技术3、递归独占互斥量 std::recursive_mutex4、带超时的互斥量 std::timed_mutex 和 std::recursive_timed_mutex4.1 std::timed_mutex&#xff1a;是带超时的…...

编程日记 2023/8/20 0:08:24

[MAUI]在.NET MAUI中实现可拖拽排序列表

文章目录 创建可拖放控件创建绑定服务类拖拽&#xff08;Drag&#xff09;拖拽悬停&#xff0c;经过&#xff08;DragOver&#xff09;释放&#xff08;Drop&#xff09; 创建页面元素最终效果项目地址 .NET MAUI 中提供了拖放(drag-drop)手势识别器&#xff0c;允许用户通过拖…...

编程日记 2023/8/20 0:07:22

Linux 内核内存管理 pfn_to_online_page宏

文章目录 一、Memory Hotplug1.1 简介1.2 热插拔事件通知机制 二、pfn_to_online_page2.1 pfn_to_online_page2.2 pfn_to_section_nr2.3 online_section_nr 参考资料 一、Memory Hotplug 1.1 简介 Linux 内存热插拔&#xff08;Memory Hotplug&#xff09;是指在运行时动态增…...

编程日记 2023/8/20 0:06:19

『C语言初阶』第八章 -结构体

前言 今天小羊又来给铁汁们分享关于C语言的结构体&#xff0c;在C语言中&#xff0c;结构体类型属于一种构造类型&#xff08;其他的构造类型还有&#xff1a;数组类型&#xff0c;联合类型&#xff09;&#xff0c;今天我们主要简单了解一下结构体。 一、结构体是什么&#x…...

编程日记 2023/8/20 0:05:15

chatgpt汇编，两个关于chatgpt的问题

1.用C写一个高级的可自主学习的AI语言模型 编写一个高级的可自主学习的AI语言模型是一个复杂且庞大的工程&#xff0c;需要深入的专业知识和大量的时间精力。下面是一个简化的示例&#xff0c;演示如何使用C实现一个基本的可自主学习的AI语言模型。 首先&#xff0c;你需要定…...

编程日记 2023/8/20 0:04:14

ps丢失d3dcompiler_47.dll怎么办，启动无反应，分享三个解决方法

d3dcompiler_47.dll64位是windows系统中重要的dll文件&#xff0c;缺少了它可能会引起部分软件或者游戏不能运行。 如果系统出现“找不到d3dcompiler_47.dll”或“d3dcompiler_47.dll丢失”等错误信息&#xff0c;那么我们就该着手修复它。 先带了解一下d3dcompiler_47.dll是什…...

编程日记 2023/8/20 0:03:13

第三章nginx详解

nginx&#xff1a;高性能&#xff0c;轻量级的web服务软件。 特点&#xff1a; 1&#xff0c;稳定性高。&#xff08;没有apache稳定&#xff09; 2&#xff0c;系统资源消耗地较低。&#xff08;处理http请求的并发能力非常高&#xff0c;单台物理服务器可以处理30000-5000…...

编程日记 2023/8/20 0:02:12

【二叉树前沿篇】树

【二叉树前沿篇】树 1 树的概念2. 树的相关概念3. 树的表示4. 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 1 树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是…...

编程日记 2023/8/20 0:01:11

python3 0基础学习----数据结构（基础+练习）

python 0基础学习笔记之数据结构 &#x1f4da; 几种常见数据结构列表 &#xff08;List&#xff09;1. 定义2. 实例&#xff1a;3. 列表中常用方法.append(要添加内容) 向列表末尾添加数据.extend(列表) 将可迭代对象逐个添加到列表中.insert(索引&#xff0c;插入内容) 向指定…...

编程日记 2023/8/20 0:00:10

计算机科学中的“旅行商问题”

题目&#xff1a;旅行商问题&#xff08;Traveling Salesman Problem&#xff09; 当初为何收藏&#xff1a;我收藏了这个题目是因为它是一个经典而富有挑战性的组合优化问题&#xff0c;涉及到计算机科学、算法设计和实际应用领域。我认为这个问题可以展示出算法设计的重要性…...

编程日记 2023/8/19 23:59:09

QT:自定义控件（Connect使用，子控件连接）

自定义控件封装&#xff1a; 1.添加新文件&#xff08;设计师界面类&#xff09;&#xff0c;创建子页面 &#xff0c;放自己想要的控件 2.在主页面中使用子控件 :新建一个widget-![在这里插入图片描述](https://img-blog.csdnimg.cn/95ed8015343e4c56a3914853950eff4c.png#pi…...

编程日记 2023/8/19 23:58:08

目录——车载网络安全

本文主要汇总车载网络安全专栏文章，以方便各位读者阅读。 ISO21434 概述（一） ISO21434 组织网络安全管理（二） ISO21434 项目网络安全管理（三） ISO21434 分布式网络安全（四） SO21434 持续进行的网络安全（五） ISO21434 概念阶段网络安全（六）...

编程日记 2023/8/19 23:57:04

Visual Studio 如何放大代码字体的大小

1.打开Visual Studio&#xff0c;新建一个程序&#xff0c;一段代码&#xff0c;为接下去的操作做好准备。单击菜单栏的【工具】选项。 2.在跳出来菜单中找到【选项】&#xff08;一般在最后一项&#xff09;&#xff0c;然后单击。跳出新的窗口。 3.跳出新的窗口后&#xff…...

编程日记 2023/8/19 23:56:03

Verilog同步FIFO设计

同步FIFO(synchronous)的写时钟和读时钟为同一个时钟&#xff0c;FIFO内部所有逻辑都是同步逻辑&#xff0c;常常用于交互数据缓冲。 异步FIFO&#xff1a;数据写入FIFO的时钟和数据读出FIFO的时钟是异步的(asynchronous) 典型同步FIFO有三部分组成: &#xff08;1&#xff0…...

编程日记 2023/8/19 23:53:52

Php“牵手”lazada商品详情页数据采集方法,lazadaAPI接口申请指南

lazada详情接口 API 是开放平台提供的一种 API 接口&#xff0c;它可以帮助开发者获取商品的详细信息&#xff0c;包括商品的标题、描述、图片等信息。在电商平台的开发中&#xff0c;详情接口API是非常常用的 API&#xff0c;因此本文将详细介绍详情接口 API 的使用。 一、la…...

编程日记 2023/8/19 23:52:50

Sentinel 规则持久化

文章目录 Sentinel 规则持久化一、修改order-service服务1.引入依赖2.配置nacos地址 第二步修改非常麻烦&#xff0c;可以略过&#xff0c;直接使用已经打好包的来使用二、修改sentinel-dashboard源码1. 解压2. 修改nacos依赖3. 添加nacos支持4. 修改nacos地址5. 配置nacos数据…...

编程日记 2023/8/19 23:51:49

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/2/6 1:04:23

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2026/2/6 3:24:58

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2026/1/29 7:31:17

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2026/1/8 0:40:27

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

编程新知 2026/2/3 4:42:54