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

前端 CSS 经典：filter 滤镜

news 2026/3/29 6:32:10

前言：什么叫滤镜呢，就是把元素里的像素点通过一套算法转换成新的像素点，这就叫滤镜。而算法有 drop-shadow、blur、contrast、grayscale、hue-rotate 等。我们可以通过这些算法实现一些常见的 css 样式。

1. drop-shadow 图片阴影

可以用来设置图片阴影，相较于 box-shadow 设置盒子阴影，drop-shadow 设置的是元素中的像素点的阴影，用法基本和 box-shadow 一致。例子如下：给图像设置阴影。背景透明人物图像是博主自己用 ps 扣的，有点瑕疵，别介意。网上下不到素材，全是收费的，过分。

素材图：

<!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>img {filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));}</style></head><body><img src="/demo.png" /></body>
</html>

效果图： 

 2. blur 高斯模糊

里面传入一个值，这个值叫模糊半径，值越大，越模糊。可以用来设置毛玻璃效果。什么叫毛玻璃效果呢，就是透过设置了毛玻璃效果的元素，看遮挡下的元素是模糊的效果，就叫毛玻璃效果。那就不能用 filter 了，因为 filter 是让当前元素像素点参与计算，需要用到 drop-filter，drop-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>.contain {width: 500px;height: 500px;margin: 200px auto;position: relative;}p {position: absolute;top: 0;z-index: 998;}.box {position: absolute;top: 0;height: 270px;width: 450px;border-radius: 25px;background: rgba(47, 185, 203, 0.2);backdrop-filter: blur(5px);border: 2px solid rgba(47, 185, 203, 0.1);box-shadow: 0 0 80px rgba(47, 185, 203, 0.1);overflow: hidden;z-index: 999;}</style></head><body><div class="contain"><p>这是一个磨砂玻璃样式下的一些文字，这是一个磨砂玻璃样式下的一些文字，这是一个磨砂玻璃样式下的一些文字，这是一个磨砂玻璃样式下的一些文字，这是一个磨砂玻璃样式下的一些文字，这是一个磨砂玻璃样式下的一些文字，</p><div class="box"></div></div></body>
</html>

3. contrast 对比度

contrast 设置对比度，默认值是 1，这个值越大，对比度越大，什么叫对比度呢，就是白的越白，黑的越黑。颜色之间的对比越明显。

可以配合 blur 模糊，做字体效果。

<!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>.box {background: #fff;color: #000;filter: contrast(30);}h1 {margin: 0;font-size: 10em;filter: blur(10px);}</style></head><body><div class="box"><h1>666</h1></div></body>
</html>

4. grayscale 灰度

grayscale 设置灰度，当值设为 1 时，元素里的所有像素点就变成灰度值，这个属性很有用，当遇到纪念日时，需要把网站变成黑白的，就可以在

html 元素中设置灰度。打开百度，找到在 html 下设置灰度值。

html {filter: grayscale(1);
}

5. hue-rotate 色相环

hue-rotate 设置色相环，它可以调整像素点的色相，函数里面的角度，就是色相环上对应的颜色。

相关文章：

前端 CSS 经典：filter 滤镜

前言&#xff1a;什么叫滤镜呢&#xff0c;就是把元素里的像素点通过一套算法转换成新的像素点&#xff0c;这就叫滤镜。而算法有 drop-shadow、blur、contrast、grayscale、hue-rotate 等。我们可以通过这些算法实现一些常见的 css 样式。 1. drop-shadow 图片阴影 可以用来…...

编程日记 2024/5/30 13:11:35

专业的力量-在成为专家的道路上前进

专业的力量-在成为专家的道路上前进 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 现在稀缺的已不再是信息资源&#xff0c;而是运用信息的能力。过去…...

编程日记 2024/5/30 13:08:32

10分钟掌握FL Studio21中文版，音乐制作更高效！

FL Studio 21中文版是Image Line公司推出的一款深受欢迎的数字音频工作站软件&#xff0c;在音乐制作领域享有盛誉。这个版本特别针对中文用户进行了本地化处理&#xff0c;旨在提供更加便捷的用户体验和操作界面。本次评测将深入探讨FL Studio 21中文版的功能特点、使用体验及…...

编程日记 2024/5/30 13:07:32

Python中4种读取JSON文件和提取JSON文件内容的方法

在Python中&#xff0c;有几种常用的方法可以用于读取JSON文件并提取数据。以下是四种主要的方法 使用iamn 1oad:0”:这个方法用于格一个包合S0N文档的字符串(enr、wtas典otea实列)反席列化 (0eseia28)为Pm0n%象。例如&#xff0c;如果你有一个ISON格式的字荷电&#xff0c;你…...

编程日记 2024/5/30 13:06:29

el-pagination在删除非第一页的最后一条数据遇到的问题

文章目录 前言一、问题展示二、解决方案三、源码解析1、elementui2、elementplus 总结 前言 这个问题是element-ui中的问题&#xff0c;可以从源码中看出来&#xff0c;虽然页码更新了&#xff0c;active也是对的&#xff0c;但是未调用current-change的方法&#xff0c;这里就…...

编程日记 2024/5/30 13:05:28

视频汇聚平台LntonCVS视频监控系统前端错误日志记录及Debug模式详细讲解

LntonCVS作为一种支持GB28181标准的流媒体服务平台&#xff0c;旨在提供一个能够整合不同厂商设备、便于管理和扩展的解决方案&#xff0c;以适应日益复杂的视频监控环境。通过实现设备的统一管理和流媒体的高效传输&#xff0c;LntonCVS帮助构建更加灵活和强大的视频监控系统。…...

编程日记 2024/5/30 13:04:27

高并发项目-用户登录基本功能

文章目录 1.数据库表设计1.IDEA连接数据库2.修改application.yml中数据库的名称为seckill3.IDEA创建数据库seckill4.创建数据表 seckill_user5.密码加密分析1.传统方式&#xff08;不安全&#xff09;2.改进方式&#xff08;两次加密加盐&#xff09; 2.密码加密功能实现1.pom.…...

编程日记 2024/5/30 13:03:25

kotlin基础之泛型和委托

Kotlin泛型的概念及使用 泛型概念 在Kotlin中&#xff0c;泛型&#xff08;Generics&#xff09;是一种允许在类、接口和方法中使用类型参数的技术。这些类型参数在实例化类、实现接口或调用方法时会被具体的类型所替代。泛型的主要目的是提高代码的复用性、类型安全性和可读…...

编程日记 2024/5/30 13:01:23

awtk踩坑记录二：移植jerryscript到awtk design项目

工作要求&#xff0c;想尝试看看在awtk-designer设计界面的同时能不能用javascript开发逻辑层&#xff0c;以此和前端技术联动&#xff0c;本文是一种项目建构的思路。 从github下载并编译awtk, awtk-mmvm和awtk-jerryscript&#xff08;如果没有&#xff09; 用awtk-designer…...

编程日记 2024/5/30 13:00:19

正邦科技（day2）

自动校准 问题&#xff1a;电量不准都可以直接去校准 校准方式&#xff1a;可程式变频电压 问题分析&#xff1a;他是通过软件去自动自动校准的&#xff0c;flash 清空的时候有缓存没有清空&#xff0c;或者互感器没有读取到问题 互感器&#xff1a;电流互感器的作用包括电流测…...

编程日记 2024/5/30 12:59:18

技术架构设计指南：从需求到实现

技术架构是软件系统的骨架&#xff0c;它决定了系统的性能、可靠性、扩展性等关键特性。本文将介绍技术架构设计的一般步骤和方法。 第一步&#xff1a;需求分析 在设计技术架构之前&#xff0c;首先要对系统需求进行全面深入的分析。这包括功能需求、非功能需求&#xff08;如…...

编程日记 2024/5/30 12:57:16

【数据结构：排序算法】堆排序（图文详解）

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;数据结构课程学习 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 &#x1f369;1.大堆和小堆 &#x1f369;2.向上调整算法建堆和向下调整算法建堆&#xff1a;…...

编程日记 2024/5/30 12:54:12

git 派生仓库怎么同步主仓库的新分支

一、git 派生仓库怎么同步主仓库的新分支 要使你的Git派生仓库同步主仓库的新分支&#xff0c;请遵循以下步骤&#xff1a; 1、添加上游仓库&#xff08;如果尚未添加&#xff09;: 如之前所述&#xff0c;确保上游仓库已经被添加到你的本地仓库。如果没有&#xff0c;使用命…...

编程日记 2024/5/30 12:51:08

对比方案：5款知识中台工具的优缺点详解

知识中台工具为企业和组织高效地组织、存储和分享知识&#xff0c;还能提升团队协作的效率。在选择搭建知识中台的工具时&#xff0c;了解工具的优缺点&#xff0c;有助于企业做出最佳决策。本文LookLook同学将对五款搭建知识中台的工具进行优缺点的简单介绍&#xff0c;帮助企…...

编程日记 2024/5/30 12:50:07

第16章-超声波跟随功能 基于STM32的三路超声波自动跟随小车 毕业设计 课程设计

第16章-超声波跟随功能 无PID跟随功能 //超声波跟随if(HC_SR04_Read() > 25){motorForward();//前进HAL_Delay(100);}if(HC_SR04_Read() < 20){motorBackward();//后退HAL_Delay(100);}PID跟随功能 在pid.c中定义一组PID参数 tPid pidFollow; //定距离跟随PIDpidFol…...

编程日记 2024/5/30 12:48:04

创新案例 | 持续增长，好孩子集团的全球化品牌矩阵战略与客户中心设计哲学

探索好孩子集团如何通过创新设计的全球化品牌矩阵和以客户为中心的产品策略&#xff0c;在竞争激烈的母婴市场中实现持续增长。深入了解其品牌价值观、市场定位策略以及如何满足新一代父母的需求。本文旨在为中高级职场人士、创业家及创新精英提供深度见解&#xff0c;帮助他们…...

编程日记 2024/5/30 12:47:03

ResNet 原理剖析以及代码复现

原理 ResNet 解决了什么问题&#xff1f; 一言以蔽之&#xff1a;解决了深度的神经网络难以训练的问题。 具体的说&#xff0c;理论上神经网络的深度越深&#xff0c;其训练效果应该越好&#xff0c;但实际上并非如此&#xff0c;层数越深会导致越差的结果并且容易产生梯度爆炸…...

编程日记 2024/5/30 12:46:02

数据结构（十）图

文章目录 图的简介图的定义图的结构图的分类无向图有向图带权图&#xff08;Wighted Graph&#xff09; 图的存储邻接矩阵&#xff08;Adjacency Matrix&#xff09;邻接表代码实现 图的遍历深度优先搜索&#xff08;DFS&#xff0c;Depth Fisrt Search&#xff09;遍历抖索过程…...

编程日记 2024/5/30 12:45:00

四数之和-力扣

本题在三数之和的基础上&#xff0c;再增加一重循环进行解答 首先注意的点是&#xff0c;一级剪枝处理&#xff0c;target > 0 && nums[i] > target 此处只有整数才可剪枝处理&#xff0c;如果target为负数&#xff0c;nums[i] < target&#xff0c;也不能代…...

编程日记 2024/5/30 12:43:58

JS 中怎么删除数组元素？有哪几种方法？

正文开始之前推荐一位宝藏博主免费分享的学习教程，学起来！ 编号学习链接1Cesium: 保姆级教程+源码示例2openlayers: 保姆级教程+源码示例3Leaflet: 保姆级教程+源码示例4MapboxGL: 保姆级教程+源码示例splice() JavaScript中的splice()方法是一个内置的数组对象函数， 用于…...

编程日记 2024/5/30 12:41:56

Gazebo室内环境建模实战：从零构建到launch文件一键启动

1. Gazebo室内建模入门指南 第一次接触Gazebo室内建模时&#xff0c;我被它强大的功能震撼到了。作为一个机器人仿真平台&#xff0c;Gazebo不仅能模拟各种物理环境&#xff0c;还能让我们快速搭建测试场景。想象一下&#xff0c;你正在开发一个扫地机器人或者服务机器人&#…...

编程新知 2026/3/29 5:07:48

GHelper技术解析：华硕笔记本轻量级性能优化工具架构与配置指南

GHelper技术解析&#xff1a;华硕笔记本轻量级性能优化工具架构与配置指南 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models …...

编程新知 2026/3/29 4:00:52

别再只盯着7805了！聊聊LDO选型时那些容易被忽略的关键参数（附实测对比）

LDO选型实战指南&#xff1a;超越7805的五大高阶参数解析 在电子设计领域&#xff0c;低压差线性稳压器(LDO)如同电路系统中的"毛细血管"&#xff0c;负责将能量精准输送到每个功能模块。当大多数工程师还在使用上世纪设计的7805时&#xff0c;现代LDO芯片早已进化出…...

编程新知 2026/3/29 3:50:48

Comsol 仿真纳米孔超表面的手性响应：探索微观世界的光学奥秘

comsol仿真纳米孔超表面的手性响应在光学领域&#xff0c;超表面以其独特的亚波长结构展现出对光的卓越操控能力&#xff0c;而手性超表面更是其中的璀璨明珠&#xff0c;能够对不同旋向的圆偏振光产生特异响应。今天咱们就来聊聊如何用 Comsol 对纳米孔超表面的手性响应进行仿…...

编程新知 2026/3/29 3:42:47

别再死记硬背了！用Python（NumPy/SymPy）实战求解常系数微分方程，特征值法保姆级教程

用Python实战求解常系数微分方程&#xff1a;特征值法全流程解析 微分方程是描述自然规律的核心工具&#xff0c;从弹簧振动到电路分析无处不在。传统解法依赖繁琐的手工计算&#xff0c;而今天我们将用Python的NumPy和SymPy库&#xff0c;把数学理论转化为可执行的代码解决方案…...

编程新知 2026/3/29 3:14:34

3步掌握RISC-V处理器仿真：可视化工具Ripes完全指南

3步掌握RISC-V处理器仿真&#xff1a;可视化工具Ripes完全指南 【免费下载链接】Ripes A graphical processor simulator and assembly editor for the RISC-V ISA 项目地址: https://gitcode.com/gh_mirrors/ri/Ripes 想要深入理解计算机底层运行机制却苦于硬件门槛太高…...

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

OpenClaw私有化部署指南：Qwen3-VL:30B+飞书智能助手

OpenClaw私有化部署指南&#xff1a;Qwen3-VL:30B飞书智能助手 1. 为什么选择本地化部署&#xff1f; 去年我接手了一个需要处理大量敏感数据的项目&#xff0c;团队最初尝试使用公有云API&#xff0c;但很快遇到了数据合规问题。这促使我开始研究本地化AI解决方案&#xff0…...

编程新知 2026/3/29 0:33:08

Element-UI Admin：企业级后台管理系统架构解析与深度指南

Element-UI Admin&#xff1a;企业级后台管理系统架构解析与深度指南 【免费下载链接】element-ui-admin 基于 element-ui 的单页面后台管理项目模版 项目地址: https://gitcode.com/gh_mirrors/el/element-ui-admin Element-UI Admin是一款基于Vue.js和Element-UI组件库…...

编程新知 2026/3/29 0:09:03

在 Windows 11 家庭版安装 Docker Desktop解决虚拟化问题

目录 前言 环境说明 架构原理 第一步&#xff1a;启用 Windows 虚拟化功能 第二步&#xff1a;修复 Hypervisor 启动配置 第三步&#xff1a;安装 WSL 2 与 Ubuntu 第四步&#xff1a;启动 Docker Desktop 第五步&#xff1a;验证安装 常见问题 总结 前言 Docker 是目…...

编程新知 2026/3/29 0:01:01

Hain性能优化终极教程：10个技巧让你的启动器运行更快更稳定

Hain性能优化终极教程&#xff1a;10个技巧让你的启动器运行更快更稳定 【免费下载链接】hain An altspace launcher for Windows, built with Electron 项目地址: https://gitcode.com/gh_mirrors/ha/hain 想要让你的Hain启动器运行如飞吗&#xff1f;作为一款基于Elec…...

编程新知 2026/3/28 23:06:22