CSS系列（11）-- 滤镜与混合模式详解
前端技术探索系列：CSS 滤镜与混合模式详解 🎨
致读者：探索视觉效果的艺术 👋
前端开发者们，
今天我们将深入探讨 CSS 滤镜与混合模式，学习如何创建独特的视觉效果。
滤镜效果详解 🚀
基础滤镜
/* 基础滤镜效果 */
.filter-basic {/* 模糊 */filter: blur(5px);/* 亮度 */filter: brightness(150%);/* 对比度 */filter: contrast(200%);/* 灰度 */filter: grayscale(100%);/* 色相旋转 */filter: hue-rotate(90deg);/* 反相 */filter: invert(100%);/* 透明度 */filter: opacity(50%);/* 饱和度 */filter: saturate(200%);/* 褐色 */filter: sepia(100%);/* 阴影 */filter: drop-shadow(2px 4px 6px black);
}/* 组合滤镜 */
.filter-combined {filter: contrast(150%) brightness(110%) saturate(120%)hue-rotate(10deg);
}
创意滤镜效果
/* 毛玻璃效果 */
.frosted-glass {background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);
}/* 动态滤镜 */
.hover-filter {transition: filter 0.3s ease;
}.hover-filter:hover {filter: brightness(110%) contrast(110%) saturate(120%);
}/* 图片滤镜预设 */
.filter-preset {/* Instagram-like 效果 */&.nashville {filter: sepia(20%)contrast(150%)brightness(110%)hue-rotate(-10deg);}/* 复古效果 */&.vintage {filter:grayscale(50%)sepia(40%)brightness(90%)contrast(120%);}
}
混合模式详解 🎯
基础混合模式
/* 混合模式基础 */
.blend-basic {/* 背景混合 */background-blend-mode: multiply;/* 元素混合 */mix-blend-mode: overlay;
}/* 常用混合模式 */
.blend-modes {/* 正片叠底 */mix-blend-mode: multiply;/* 叠加 */mix-blend-mode: overlay;/* 滤色 */mix-blend-mode: screen;/* 柔光 */mix-blend-mode: soft-light;/* 强光 */mix-blend-mode: hard-light;/* 差值 */mix-blend-mode: difference;/* 排除 */mix-blend-mode: exclusion;
}
创意混合效果
/* 双重曝光效果 */
.double-exposure {position: relative;&::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('texture.jpg');mix-blend-mode: multiply;}
}/* 文字混合效果 */
.blend-text {position: relative;color: white;mix-blend-mode: difference;&::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: white;mix-blend-mode: difference;}
}
实践项目：图片效果处理器 🛠️
class ImageEffectProcessor {constructor(options = {}) {this.options = {presets: {vintage: {filters: [{ type: 'grayscale', value: 50 },{ type: 'sepia', value: 40 },{ type: 'brightness', value: 90 },{ type: 'contrast', value: 120 }],blend: 'multiply'},dramatic: {filters: [{ type: 'contrast', value: 150 },{ type: 'brightness', value: 110 },{ type: 'saturate', value: 120 }],blend: 'overlay'}},...options};this.init();}init() {this.createStyles();this.setupControls();}createStyles() {const style = document.createElement('style');style.textContent = this.generateStyles();document.head.appendChild(style);}generateStyles() {return `${this.generatePresetStyles()}${this.generateUtilityStyles()}`;}generatePresetStyles() {let styles = '';Object.entries(this.options.presets).forEach(([name, preset]) => {styles += `.preset-${name} {filter: ${this.createFilterString(preset.filters)};mix-blend-mode: ${preset.blend};}`;});return styles;}createFilterString(filters) {return filters.map(filter => `${filter.type}(${filter.value}${this.getUnit(filter.type)})`).join(' ');}getUnit(filterType) {const units = {blur: 'px',brightness: '%',contrast: '%',grayscale: '%',hue-rotate: 'deg',invert: '%',opacity: '%',saturate: '%',sepia: '%'};return units[filterType] || '';}applyEffect(element, preset) {const presetConfig = this.options.presets[preset];if (!presetConfig) return;element.style.filter = this.createFilterString(presetConfig.filters);element.style.mixBlendMode = presetConfig.blend;}setupControls() {const controls = document.createElement('div');controls.className = 'effect-controls';Object.keys(this.options.presets).forEach(preset => {const button = document.createElement('button');button.textContent = preset;button.onclick = () => this.applyPreset(preset);controls.appendChild(button);});document.body.appendChild(controls);}applyPreset(preset) {document.querySelectorAll('.effect-target').forEach(element => {this.applyEffect(element, preset);});}
}
最佳实践建议 💡
-
滤镜使用
- 适度使用滤镜
- 注意性能影响
- 考虑降级方案
- 组合使用效果
-
混合模式
- 合理选择模式
- 考虑背景色影响
- 注意层级关系
- 测试兼容性
-
性能优化
- 避免过度叠加
- 使用硬件加速
- 控制动画效果
- 优化渲染性能
写在最后 🌟
CSS 滤镜与混合模式为我们提供了强大的视觉效果处理能力，合理运用这些特性可以创造出独特的视觉体验。
进一步学习资源 📚
- 滤镜效果集合
- 混合模式指南
- 性能优化技巧
- 创意案例展示
如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇
终身学习，共同成长。
咱们下一期见
💻
相关文章：
CSS系列（11）-- 滤镜与混合模式详解
前端技术探索系列：CSS 滤镜与混合模式详解 🎨 致读者：探索视觉效果的艺术 👋 前端开发者们， 今天我们将深入探讨 CSS 滤镜与混合模式，学习如何创建独特的视觉效果。 滤镜效果详解 🚀 基础滤…...
Cesium进阶教程——自定义图形、外观、绘图基础、现有着色器移植至Cesium、ShadowMapping、视频GIS、模型压平、卷帘
基础必看 WEBGL基础（从渲染管线角度解读） 参考路线 http://www.xt3d.online/tutorial/further/article.html 自定义图形 https://blog.csdn.net/m0_55049655/article/details/138908327 https://blog.csdn.net/m0_55049655/article/details/140306837 …...
搭建Tomcat（一）---SocketServerSocket
目录 引入1 引入2--socket 流程 Socket（应用程序之间的通讯保障） 网卡(计算机之间的通讯保障) 端口 端口号 实例 client端 解析 server端 解析 相关方法 问题1：ServerSocket和Socket有什么关系？ ServerSocket Soc…...
Sublime Text 64位：前端及全栈开发利器
本文还有配套的精品资源，点击获取 简介：Sublime Text作为一款高效的文本编辑器，在前端网页开发领域受到广泛青睐，特别是其64位版本在处理大型项目和高内存需求的场景下表现出色。编辑器内置Emmet插件，提供代码高亮、…...
CNCF云原生生态版图-分类指南（一）- 观测和分析
CNCF云原生生态版图-分类指南（一）- 观测和分析 CNCF云原生生态版图-分类指南一、观测和分析（Observability and Analysis）（一）可观测性（Observablility）1. 是什么？2. 解决…...
Ubuntu本地快速搭建web小游戏网站，公网用户远程访问【内网穿透】
文章目录 前言1. 本地环境服务搭建2. 局域网测试访问3. 内网穿透3.1 ubuntu本地安装cpolar内网穿透3.2 创建隧道3.3 测试公网访问4. 配置固定二级子域名4.1 保留一个二级子域名4.2 配置二级子域名4.3 测试访问公网固定二级子域名前言 网：我们通常说的是互联网；站：可以理解成…...
VMware ubuntu12.04怎么设置静态IP联网
记得刚开始学习嵌入式就是从ubuntu12.04的环境开始学习的C语言，当时没有弄清楚怎么设置静态IP联网，现在写一篇文章。 1.首先，关闭ubuntu的网络； 2.电脑使用的是wifi,将VMware桥接到该网卡上； 3.在虚拟机设置里面选择桥…...
Qt WORD/PDF（一）使用 QtPdfium库实现 PDF 预览
文章目录 一、简介二、下载 QtPdfium三、加载 QtPdfium 动态库四、Demo 使用 关于QT Widget 其它文章请点击这里: QT Widget 姊妹篇: Qt WORD/PDF（一）使用 QtPdfium库实现 PDF 操作 Qt WORD/PDF（二）使用 QtPdfium库实现…...
UE5 C++ Subsystem 和 多线程
一.Subsystem先做一个简单的介绍，其实可以去看大钊的文章有一篇专门讲这个的。 GamePlay框架基础上的一个增强功能，属于GamePlay架构的范围。Subsystems是一套可以定义自动实例化和释放的类的框架。这个框架允许你从5类里选择一个来定义子类(只能在C定义…...
23.DDD与微服务
学习视频来源：DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 DDD与微服务的关系1. DDD可以用微服务实现，也可以不用微服务实现2. DDD是微服务拆分的必须参考项之一3. 微服务架构…...
vue3+ant design vue实现日期选择器不展示清除按钮
1、代码：只需设置:allowClear"false"即可 <a-date-pickerv-model:value"value1":disabledDate"disabledDate"change"queryRate":allowClear"false" />const disabledDate (current: Dayjs) > {// 获取…...
Amazon Bedrock与AWS服务的无缝集成，如何打造智能化应用
在AI和大数据飞速发展的今天，Amazon Bedrock作为AWS的一项新兴服务，正逐渐成为开发者和企业拥抱生成式AI的核心工具。那么，Amazon Bedrock与AWS其他服务结合，究竟能够带来哪些强大的应用场景呢？今天九河云就来和大家探…...
Rust之抽空学习系列（四）—— 编程通用概念（下）
Rust之抽空学习系列（四）—— 编程通用概念（下） 1、函数 函数用来对功能逻辑进行封装，能够增强复用、提高代码的可读 以下是函数的主要组成部分： 名称参数返回类型函数体 1.1、函数名称 在Rust中&…...
【Apache paimon】-- 集成 hive3.1.3 异常
目录 1、场景再现 Step1：在 hive cli beeline 执行创建 hive paimon 表 Step2：使用 insert into 写入数据 Step3：抛出异常 2、原因分析 Step1：在 yarn resource manager 作业界面查询 hive sql mr job 的 yarn log Step2：搜索job 使用的 zstd jar 版本 Step3：定…...
SpringCloud微服务实战系列：01让SpringCloud项目在你机器上运行起来
目录 项目选型 项目安装-本地运行起来 软件安装： 项目启动： 总结&答疑 项目选型 软件开发，基本上都不会从0开始，一般都是在其他项目或者组件的基础上进行整合优化迭代，站在巨人肩膀上才能看得更远，…...
分布式锁【Redis场景分布式锁篇】
文章目录 1.Redis分布式锁2.分布式锁其它方案1.主动轮询型1.MySQL分布式锁2.Redis分布式锁 2.监听回调型1.Etcd2.Zookeeper 总结 1.Redis分布式锁 锁通常用来控制共享资源，比如一个进程内有多个线程竞争一个数据的使用权限，解决方式之一就是加锁。分布式…...
BGP协议
BGP（Border Gateway Protocol，边界网关协议）是一种用于在不同网络之间传输可达性信息的路由协议。它是互联网上使用的主要协议之一，用于连接不同的自治系统（AS），即由单个实体控。边界网关协议_百…...
iframe webview打开外链内嵌video标签导致视频无法全屏展示
iframe webview打开外链内嵌video标签导致视频无法全屏展示 解决方法iframe 添加属性webview 添加属性 解决方法 iframe 添加属性 <iframe style"width: 100%;height: 100vh;" src"http://xxx.xxx........" allowfullscreen"true" w…...
学习日志024--opencv中处理轮廓的函数
目录 前言 一、 梯度处理的sobel算子函数 功能 参数 返回值 代码演示 二、梯度处理拉普拉斯算子 功能 参数 返回值 代码演示 三、Canny算子 功能 参数 返回值 代码演示 四、findContours函数与drawContours函数 功能 参数 返回值 代码演示 …...
【从零开始入门unity游戏开发之——C#篇05】转义字符、@处理多行文本或者不使用转义字符、随机数
文章目录 一、转义字符1、什么是转义字符？2、常见的转义字符3、总结 二、使用处理多行文本或者不使用转义字符1、多行字符串2、不使用转义字符 三、随机数1、Random.Next()生成随机整数示例：生成一个随机整数生成指定范围内的随机整数 2、Random.NextSin…...
PHP获取指定日期的下周日至下周六的日期（下周几的日期）
PHP获取指定日期的下周日至下周六的日期（下周几的日期） 在PHP中，可以使用strtotime()函数来获取指定日期的下周日至下周六的日期。 // 周天 sunday // 周一 monday // 周二 tuesday // 周三 wednesday // 周四 thursday // 周五 friday // …...
超越飞书钉钉：探索高效内部知识库平替方案与应用
在团队协作日益频繁的今天，飞书与钉钉作为两大主流的企业沟通与协作平台，广受企业青睐。然而，随着企业规模的扩大和知识的累积，单纯的沟通与协作已难以满足企业对知识管理与传承的需求。因此，寻找一款能够高效整合内部…...
3D相框案例讲解（详细）
前言 通过现阶段的学习，我们已经掌握了HTML，CSS和JS部分的相关知识点，现在让我们通过一篇案例，来巩固我们近期所学的知识点。 详细视频讲解戳这里 任务一 了解目标案例样式 1.1了解案例 3D相框 1.2 分析案例 首先我们看到一个…...
一、基于langchain使用Qwen搭建金融RAG问答机器人--技术准备
一,LangChain框架介绍 LangChain 框架是一个开源工具，通过为各种 LLM 提供通用接口来简化应用程序的开发流程，帮助开发者自由构建 LLM应用。 LangChain封装了很多组件，通过这些组件的组合可以构建多种类型的RAG应用。开发者可以直接将私有数…...
2024年全球安全光幕装置行业总体规模、主要企业国内外市场占有率及排名
根据研究团队调研统计，2023年全球安全光幕装置市场销售额达到了46亿元，预计2030年将达到70亿元，年复合增长率（CAGR）为6.4%（2024-2030）。中国市场在过去几年变化较快，2023年市场规模为…...
uniapp跨端适配—条件编译
在uniapp中，跨端适配是通过条件编译实现的。条件编译允许开发者根据不同的平台（如iOS、Android、微信小程序、百度小程序等）编写不同的代码。这样可以确保每个平台上的应用都能得到最优的性能和用户体验。 以下是uniapp中条件编译的基本语法…...
HTML、CSS表格的斜表头样式设置title 画对角线
我里面有用到layui框架的影响，实际根据你自己的框架来小调下就可以 效果如下 上代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…...
自动驾驶控制与规划——Project 2: 车辆横向控制
目录 零、任务介绍一、环境配置二、算法三、代码实现四、效果展示 零、任务介绍 补全src/ros-bridge/carla_shenlan_projects/carla_shenlan_stanley_pid_controller/src/stanley_controller.cpp中的TODO部分。 一、环境配置 上一次作业中没有配置docker使用gpu，…...
Docker的初识
目录 1. 容器技术发展史1.1 Jail 时代1.2 云时代1.3 云原生时代1.3.1 Google & Docker 竞争1.3.2 k8s 成为云原生事实标准 2. 虚拟化和容器化的概念2.1 什么是虚拟化、容器化2.2 为什么要虚拟化、容器化？2.3 虚拟化实现方式2.3.1 应用程序执行环境分层2.3.2 虚拟…...
R-Studio Technician，无网络负担地进行远程数据分析和数据恢复任务
对于数据恢复技术人员和技术支持团队来说，时间就是金钱。这不仅包括您在客户机器上花费的时间 - 还包括您往返公司办公室的时间，这可能会带来巨大的不便，特别是如果客户位于其他省市。电话支持通常不适用于需要数小时才能完成的复杂任务&…...
Couchbase的OLAP支持情况
Couchbase 是一个高性能的 NoSQL 数据库，主要用于在线事务处理（OLTP）场景，但它也提供了一些功能来支持在线分析处理（OLAP）需求。以下是 Couchbase 对 OLAP 支持的几个方面： 1. N1QL 查询语言 …...
路径规划之启发式算法之十六：和声搜索算法（Harmony Search, HS）
和声搜索算法（Harmony Search, HS）是一种新兴的启发式全局搜索算法，是一种模拟音乐家即兴演奏过程的群体智能优化算法。这种算法由Zong Woo Geem等人在2001年提出，灵感来源于音乐家在寻找和声时的创造性思维过程。HS算法通过模拟音乐家演奏音乐时的选择过程来寻找问题的最优…...
服务器---centos上安装docker并使用docker配置jenkins
要在 Docker 中安装 Jenkins 并进行管理，可以按照以下步骤操作： 1. 安装 Docker 首先，确保你的系统已经安装了 Docker。如果尚未安装，可以使用以下命令进行安装： 在 CentOS 上安装 Docker sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://…...
面试题整理1---正向代理和反向代理的含义及异同
面试题整理1---正向代理和反向代理的含义及异同 1. 正向代理 (Forward Proxy)1.1 正向代理定义：1.2 正向代理的工作流程：1.3 正向代理的应用场景： 2. 反向代理 (Reverse Proxy)2.1 反向代理的定义：2.2 反向代理的工作流程…...
记录学习《手动学习深度学习》这本书的笔记（五）
这一章是循环神经网络，太难了太难了，有很多卡壳的地方理解了好久，比如隐藏层和隐状态的区别、代码的含义（为此专门另写了一篇【笔记】记录对自主实现一个神经网络的步骤的理解）、梯度计算相关（【笔记】记录…...
鸿蒙调试打包（非正式打包）
文章目录 前言第一步：生成.p12和.csr文件第二步：申请证书的前置步骤第三步：申请证书 前言 HarmonyOS 应用打包后的文件为.app 格式， android 打包后的文件为.apk，IOS 打包后的文件为.apa HarmonyOS通过数字证书&#…...
Python中的容器化服务监控：结合Prometheus和Grafana实现高效监控与可视化
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 在现代的DevOps和微服务架构中，容器化技术（如Docker）已成为主流的部署方式。然而，容器环境的动态特性使得服务监控和性能分析变得更加复…...
【大数据】-- 读放大和写放大
目录 一、定义 1. 读放大（Read Amplification） 定义 原因 优化方法 2. 写放大（Write Amplification） 定义 原因 优化方法 对比与联系 二、举例 1. Hadoop（HDFS） 读放大 写放大 2. Flink 读放大 写放大 3. Hive 读放大 写放大 4. Presto 读放大 写放…...
升级带来的小麻烦)
[工具升级问题] 钉钉(linux版)升级带来的小麻烦
本文由Markdown语法编辑器编辑完成。 1. 背景: 今日钉钉又发布了新的升级版本。由于我工作时使用的是Ubuntu 20.04版本，收到的升级推送信息是，可以升级到最新的7.6.25-Release版本。根据钉钉官方给出的历次更新版说明，这个新的版本…...
，子项目(模块)间聚合）)
Maven学习（Maven项目模块化。模块间“继承“机制。父(工程)，子项目(模块)间聚合）
目录 一、Maven项目模块化？ （1）基本介绍。 （2）汽车模块化生产再聚合组装。 （3）Maven项目模块化图解。 1、maven_parent。 2、maven_pojo。 3、maven_dao。 4、maven_service。 5、maven_web。 6…...
Opencv之图像添加水印
一、实验原理 在图片处理领域，添加水印是一种常见的操作。通过叠加图像的方式，可以将水印无缝嵌入目标图像的指定位置。其基本原理包括以下步骤： 1、模板输入（掩膜生成）： 将水印图片转换为灰度图…...
在线预约陪诊小程序
一、前言 随着社会老龄化加剧以及人们健康意识的提高，就医过程中的陪伴需求日益增长。许多患者在面对复杂的医院环境、繁琐的就医流程时，需要有人协助挂号、候诊、取药等，而家属可能因工作繁忙无法全程陪同。同时，异地就医的患者更…...
2024年9月CCF GESP Scratch图形化编程等级考试四级真题试卷
GESP 图形化四级试卷（A） （满分：100 分 考试时间：120 分钟） 一、单选题（共 10 题，每题 2 分，共 30 分） 1、2024 年 10 月 8 日，诺贝尔物理学奖“意…...
【论文+源码+SQL脚本】)
[免费]SpringBoot+Vue校园社团管理系统(优质版)【论文+源码+SQL脚本】
大家好，我是java1234_小锋老师，看到一个不错的SpringBootVue校园社团管理系统(优质版)，分享下哈。 项目视频演示 【免费】SpringBootVue校园社团管理系统(优质版) Java毕业设计_哔哩哔哩_bilibili 项目介绍 随着信息技术的迅速发展&#x…...
NX系列-使用 `nmcli` 命令创建 Wi-Fi 热点并设置固定 IP 地址
使用 nmcli 命令创建 Wi-Fi 热点并设置固定 IP 地址 一、前言 在一些场景下，我们需要将计算机或嵌入式设备（例如 NVIDIA Orin NX）转换为 Wi-Fi 热点，以便其他设备（如手机、笔记本等）能够连接并使用该设备…...
Qt控件的盒子模型，了解边距边线和内容区
这篇专门讲讲一个控件在绘制时的视觉样式。我们平常在对控件设置样式时，需要设置控件的一些外边距，内边距，边线，还有文字内容，贴上图片等。那么对于一个控件，到底怎么实现这些设置的呢？ 先看下面…...
深度学习基础--将yolov5的backbone模块用于目标识别会出现怎么效果呢？？
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者：K同学啊 前言 yolov5网络结构比较复杂，上次我们简要介绍了yolov5网络模块，并且复现了C3模块，深度学习基础–yolov5网络结构简介&a…...
MySQL 根据 字段包含关键词进行分类
为了解决动态关键词匹配的需求，我们需要创建一个关键词表（keywords_table），其中存储关键词和对应的类别。以下是具体的步骤： 1. 创建关键词表 可以用以下 SQL 创建一个简单的关键词表： CREATE TABLE keyw…...
ssm-day04 mybatis
mybatis是一个持久层框架，针对的是JDBC的优化 简化数据库操作，能进行单表、多表操作，在这个框架下，需要我们自己写SQL语句 Mapper接口和MapperXML文件就相当于Dao和Dao层的实现 通常将xml文件放在resources包下 ，放在…...
soul大数据面试题及参考答案
如何看待数据仓库？ 数据仓库是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合，用于支持管理决策。 从数据存储角度看，它整合了来自多个数据源的数据。这些数据源可能包括业务系统数据库、日志文件等各种结构化和非结构化数据。例如，在电商企业中，它会整合订…...