前端 CSS 经典：filter 滤镜
前言：什么叫滤镜呢，就是把元素里的像素点通过一套算法转换成新的像素点，这就叫滤镜。而算法有 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 滤镜
前言：什么叫滤镜呢，就是把元素里的像素点通过一套算法转换成新的像素点，这就叫滤镜。而算法有 drop-shadow、blur、contrast、grayscale、hue-rotate 等。我们可以通过这些算法实现一些常见的 css 样式。 1. drop-shadow 图片阴影 可以用来…...
专业的力量-在成为专家的道路上前进
专业的力量-在成为专家的道路上前进 我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 现在稀缺的已不再是信息资源，而是运用信息的能力。过去…...
10分钟掌握FL Studio21中文版，音乐制作更高效！
FL Studio 21中文版是Image Line公司推出的一款深受欢迎的数字音频工作站软件，在音乐制作领域享有盛誉。这个版本特别针对中文用户进行了本地化处理，旨在提供更加便捷的用户体验和操作界面。本次评测将深入探讨FL Studio 21中文版的功能特点、使用体验及…...
Python中4种读取JSON文件和提取JSON文件内容的方法
在Python中，有几种常用的方法可以用于读取JSON文件并提取数据。以下是四种主要的方法 使用iamn 1oad:0”:这个方法用于格一个包合S0N文档的字符串(enr、wtas典otea实列)反席列化 (0eseia28)为Pm0n%象。例如，如果你有一个ISON格式的字荷电，你…...
el-pagination在删除非第一页的最后一条数据遇到的问题
文章目录 前言一、问题展示二、解决方案三、源码解析1、elementui2、elementplus 总结 前言 这个问题是element-ui中的问题，可以从源码中看出来，虽然页码更新了，active也是对的，但是未调用current-change的方法，这里就…...
视频汇聚平台LntonCVS视频监控系统前端错误日志记录及Debug模式详细讲解
LntonCVS作为一种支持GB28181标准的流媒体服务平台，旨在提供一个能够整合不同厂商设备、便于管理和扩展的解决方案，以适应日益复杂的视频监控环境。通过实现设备的统一管理和流媒体的高效传输，LntonCVS帮助构建更加灵活和强大的视频监控系统。…...
高并发项目-用户登录基本功能
文章目录 1.数据库表设计1.IDEA连接数据库2.修改application.yml中数据库的名称为seckill3.IDEA创建数据库seckill4.创建数据表 seckill_user5.密码加密分析1.传统方式（不安全）2.改进方式（两次加密加盐） 2.密码加密功能实现1.pom.…...
kotlin基础之泛型和委托
Kotlin泛型的概念及使用 泛型概念 在Kotlin中，泛型（Generics）是一种允许在类、接口和方法中使用类型参数的技术。这些类型参数在实例化类、实现接口或调用方法时会被具体的类型所替代。泛型的主要目的是提高代码的复用性、类型安全性和可读…...
awtk踩坑记录二：移植jerryscript到awtk design项目
工作要求，想尝试看看在awtk-designer设计界面的同时能不能用javascript开发逻辑层，以此和前端技术联动，本文是一种项目建构的思路。 从github下载并编译awtk, awtk-mmvm和awtk-jerryscript（如果没有） 用awtk-designer…...
正邦科技（day2）
自动校准 问题：电量不准都可以直接去校准 校准方式：可程式变频电压 问题分析：他是通过软件去自动自动校准的，flash 清空的时候有缓存没有清空，或者互感器没有读取到问题 互感器：电流互感器的作用包括电流测…...
技术架构设计指南：从需求到实现
技术架构是软件系统的骨架，它决定了系统的性能、可靠性、扩展性等关键特性。本文将介绍技术架构设计的一般步骤和方法。 第一步：需求分析 在设计技术架构之前，首先要对系统需求进行全面深入的分析。这包括功能需求、非功能需求（如…...
【数据结构：排序算法】堆排序（图文详解）
🎁个人主页：我们的五年 🔍系列专栏：数据结构课程学习 🎉欢迎大家点赞👍评论📝收藏⭐文章 目录 🍩1.大堆和小堆 🍩2.向上调整算法建堆和向下调整算法建堆：…...
git 派生仓库怎么同步主仓库的新分支
一、git 派生仓库怎么同步主仓库的新分支 要使你的Git派生仓库同步主仓库的新分支，请遵循以下步骤： 1、添加上游仓库（如果尚未添加）: 如之前所述，确保上游仓库已经被添加到你的本地仓库。如果没有，使用命…...
对比方案：5款知识中台工具的优缺点详解
知识中台工具为企业和组织高效地组织、存储和分享知识，还能提升团队协作的效率。在选择搭建知识中台的工具时，了解工具的优缺点，有助于企业做出最佳决策。本文LookLook同学将对五款搭建知识中台的工具进行优缺点的简单介绍，帮助企…...
第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…...
创新案例 | 持续增长，好孩子集团的全球化品牌矩阵战略与客户中心设计哲学
探索好孩子集团如何通过创新设计的全球化品牌矩阵和以客户为中心的产品策略，在竞争激烈的母婴市场中实现持续增长。深入了解其品牌价值观、市场定位策略以及如何满足新一代父母的需求。本文旨在为中高级职场人士、创业家及创新精英提供深度见解，帮助他们…...
ResNet 原理剖析以及代码复现
原理 ResNet 解决了什么问题？ 一言以蔽之：解决了深度的神经网络难以训练的问题。 具体的说，理论上神经网络的深度越深，其训练效果应该越好，但实际上并非如此，层数越深会导致越差的结果并且容易产生梯度爆炸…...
数据结构（十）图
文章目录 图的简介图的定义图的结构图的分类无向图有向图带权图（Wighted Graph） 图的存储邻接矩阵（Adjacency Matrix）邻接表代码实现 图的遍历深度优先搜索（DFS，Depth Fisrt Search）遍历抖索过程…...
四数之和-力扣
本题在三数之和的基础上，再增加一重循环进行解答 首先注意的点是，一级剪枝处理，target > 0 && nums[i] > target 此处只有整数才可剪枝处理，如果target为负数，nums[i] < target，也不能代…...
JS 中怎么删除数组元素？有哪几种方法？
正文开始之前推荐一位宝藏博主免费分享的学习教程，学起来！ 编号学习链接1Cesium: 保姆级教程+源码示例2openlayers: 保姆级教程+源码示例3Leaflet: 保姆级教程+源码示例4MapboxGL: 保姆级教程+源码示例splice() JavaScript中的splice()方法是一个内置的数组对象函数， 用于…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
【第二十一章 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 数据流…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
HarmonyOS运动开发：如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）# 前言 在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...
CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！
本文介绍了一种名为AnomalyAny的创新框架，该方法利用Stable Diffusion的强大生成能力，仅需单个正常样本和文本描述，即可生成逼真且多样化的异常样本，有效解决了视觉异常检测中异常样本稀缺的难题，为工业质检、医疗影像…...
Pydantic + Function Calling的结合
1、Pydantic Pydantic 是一个 Python 库，用于数据验证和设置管理，通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发（如 FastAPI）、配置管理和数据解析，核心功能包括： 数据验证：通过…...
高分辨率图像合成归一化流扩展
大家读完觉得有帮助记得关注和点赞！！！ 1 摘要 我们提出了STARFlow，一种基于归一化流的可扩展生成模型，它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流（TARFlow&am…...