找到
54
篇与
Web前端
相关的结果
-
删除 node_modules 目录太慢了？教你快速删除 前言 大家好，我是易航，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~ 在开发过程中，node_modules 文件夹常常会因为存放了大量的依赖包而变得庞大，尤其是在大型项目中。虽然 node_modules 是 Node.js 项目中不可或缺的一部分，但在一些特定的情况下，比如清理无用依赖或是重新安装依赖时，删除 node_modules 文件夹是一个常见的操作。然而，手动删除这么大的文件夹往往是一个耗时且效率低下的过程。对于开发者而言，如何快速有效地删除 node_modules 成为了一个常见的痛点。 这时，rimraf 工具就显得尤为重要，它可以替代rm -rf命令来递归删除文件夹，并且相较于手动删除，它提供了更高效的方式。 一、什么是 rimraf？ rimraf 是一个 Node.js 库，用于递归地删除文件和目录，特别适用于删除 node_modules 这样的庞大文件夹。rimraf 在删除文件和文件夹时，采用了优化过的实现，特别能够提高大文件夹删除的效率。 与操作系统自带的 rm -rf 命令相比，rimraf 通过减少系统调用、避免进程挂起等方式，能够加快删除过程，尤其在 Windows 平台上表现尤为突出，因为 Windows 本身对于删除大量文件的支持不如类 Unix 系统。 二、为什么手动删除 node_modules 这么慢？ 在大型 Node.js 项目中，node_modules 文件夹可能包含上万个文件和子文件夹。由于 node_modules 文件夹结构的复杂性和深度，手动删除该文件夹需要操作系统一次性处理大量的文件删除操作。在这种情况下，操作系统的文件系统（如 macOS 的 HFS+ 或 Windows 的 NTFS）可能会出现延迟，导致删除过程非常缓慢。 图片 1. 操作系统的文件系统限制 操作系统的文件系统并没有针对大规模删除优化。例如，当你使用文件资源管理器删除文件时，它实际上是逐一标记每个文件为删除状态，并且还会消耗大量的资源来更新文件索引。这对于 node_modules 这种成千上万个文件的文件夹来说，执行起来非常低效。 2. 文件系统缓存和索引 文件操作系统通常会保持一定的缓存和索引记录，以便加速文件的读写和删除过程。然而，当需要删除大量文件时，这些缓存和索引会成为瓶颈，导致删除变得缓慢。 三、如何使用 rimraf 加速删除过程？ rimraf 是一个专为递归删除大文件夹设计的工具，它通过优化删除过程中的一些细节，避免了文件系统缓存和索引的限制，使得删除过程更加高效。使用 rimraf 删除 node_modules 的步骤非常简单，以下是详细的操作流程。 1. 安装 rimraf 首先，我们需要在项目中安装 rimraf。可以通过 npm 或 yarn 来安装它。打开你的命令行，进入到你的项目目录下，执行以下命令： npm install rimraf --save-dev或者使用 yarn： yarn add rimraf --dev2. 在命令行中使用 rimraf 安装完成后，你可以在命令行中直接使用 rimraf 来删除 node_modules 文件夹。以下是使用 rimraf 删除 node_modules 的命令： npx rimraf node_modules3. 在 package.json 中配置脚本 为了简化操作，可以将删除命令添加到 package.json 中的 scripts 部分： { "scripts": { "clean": "rimraf node_modules" } }然后运行： npm run clean4. 使用 rimraf 加速其他删除操作 除了删除 node_modules，rimraf 还可以删除其他大文件夹： npx rimraf build四、rimraf 的优势 跨平台兼容：支持 Linux、macOS 和 Windows。 高效删除：针对大规模文件删除优化，速度显著提升。 易于使用：通过命令行或脚本配置即可快速操作。 与包管理工具集成：无缝配合 npm、yarn 使用。 五、总结 rimraf 是一个轻量级、高效且跨平台的工具，特别适合快速删除 node_modules 等大型文件夹。通过优化删除流程，它能显著提升开发效率，尤其是在 Windows 系统上表现突出。如果你还在手动删除 node_modules，不妨尝试使用 rimraf 来简化工作流程。 结语 我是易航，待过多种类型公司的前端开发者，始终坚持用通俗易懂的方式分享技术知识。欢迎关注我的博客「易航博客」获取更多前端干货！
-
使用 HTML、CSS 和 JavaScript 构建简易屏幕录像机 欢迎各位参与这个简单易行的屏幕录像项目！我们将仅使用传统的 HTML、CSS 和 JavaScript 共同完成。您可能会疑惑：为何需要这样的工具？答案在于屏幕录制对教程制作、演示汇报、缺陷报告等诸多场景至关重要。无论您是为频道创建分步教学视频，还是向潜在客户展示作品集，这类应用都不可或缺。本文将带您打造一款简约却强大的屏幕录像工具，完全基于 HTML、CSS 和 JavaScript 实现。 工具准备 如先前所述，本项目无需任何第三方库。但若您零编码经验，建议先观看此教程学习代码编辑器基础。 项目目标 本工具支持用户直接通过浏览器录制屏幕画面及完整音频。点击录制按钮后，系统将提示选择录制区域（如 Chrome 标签页），支持多窗口选择或全屏录制。右下角的 "同时共享音频" 选项可自由开关。录制前设有倒计时，最终视频以 WebM 格式下载。 代码轻量无依赖，充分利用浏览器原生 API。让我们深入解析： 架构分解 HTML 构建界面：包含视频预览、录制按钮和下载链接 CSS 样式设计：响应式布局与动感倒计时层 JavaScript 核心功能：屏幕捕捉、视频录制与下载逻辑 现在让我们深入代码实现。 HTML 结构 创建 index.html 文件，编写基础界面代码（有经验者可自定义调整）： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script src="script.js" defer></script> <title>在线屏幕录制</title> </head> <body> <div class="countdown" id="countdown"></div> <div class="screen-recorder"> <h1>开启屏幕录制</h1> <video controls preload="none" id="video"></video> <nav> <button type="button" class="btn" id="btn" aria-label="开始录制">录制</button> <a href="#" class="btn" id="link" aria-label="下载录制视频" download="recording.webm">下载视频</a> </nav> </div> </body> </html>video 元素展示录制内容，button 和 a 分别控制录制与下载。 CSS 样式 创建 style.css 美化界面（CSS 新手可参考 W3School 教程）： 关键样式说明： 全局重置：统一边距与盒模型 居中布局：使用网格布局实现垂直水平居中 倒计时层：全屏半透明遮罩与大号数字显示 响应式视频：自适应屏幕尺寸 按钮设计：统一风格与悬停效果 移动适配：媒体查询优化小屏体验 * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100vw; min-height: 100vh; display: grid; place-items: center; background-color: #f4f4f4; } .countdown { visibility: hidden; color: green; font-size: 10rem; font-weight: 900; background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; } .screen-recorder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; width: 90%; max-width: 1000px; padding: 2rem; background-color: #fff; color: #202020; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } .screen-recorder video { width: 100%; max-width: 782px; aspect-ratio: 16 / 9; max-height: 440px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), -2px -2px 5px rgba(0, 0, 0, 0.1); border-radius: 10px; display: none; } h1 { text-transform: capitalize; font-size: 3rem; font-weight: bold; color: #202020; } .btn { background-color: #428bca; color: #fff; font-weight: 900; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; text-transform: capitalize; border: 1px solid #428bca; transition: background-color 0.3s ease, color 0.3s ease; } .btn:hover, .btn:focus { background-color: #357ec7; outline: 2px solid #357ec7; outline-offset: 2px; } a { text-decoration: none; margin-inline-start: 20px; display: none; } @media (max-width: 768px) { .screen-recorder video { width: 100%; height: auto; } h1 { font-size: 2.5rem; } .btn { padding: 0.5rem 1rem; font-size: 1rem; } .countdown { font-size: 6rem; } }JavaScript 功能 创建 script.js 实现核心逻辑： 隐藏内容，请前往内页查看详情 功能解析 事件驱动：按钮点击触发录制流程 媒体捕获：使用 getDisplayMedia 获取屏幕流，getUserMedia 获取音频 倒计时机制：Promise 实现 3 秒倒计时 录制控制：MediaRecorder API 处理视频流 下载生成：Blob 对象转换下载链接 常见问题解答 Q: 能否录制系统音频？ A: 受浏览器安全策略限制，系统音频录制可能存在限制，建议使用麦克风输入。 Q: 无法录屏的解决办法？ A: 确保浏览器支持 getDisplayMedia API，最新版 Chrome/Firefox 均可。 Q: 如何提升音质？ A: 代码已启用回声消除与降噪，建议外接优质麦克风。 Q: 支持暂停录制吗？ A: 当前版本未实现，可停止后重新开始。 优劣分析 优势局限无依赖轻量级仅支持现代浏览器简单易实现无高级编辑功能音视频同步录制音频设备兼容性问题Webm 格式下载需转换格式兼容播放响应式设计无实时预览功能通过本文，您已掌握构建基础屏幕录像工具的全流程。现在即可动手实践，打造专属的录屏解决方案！ 演示站：http://web.bri6.cn/tool/screen-record/ 图片
-
JavaScript 意外的副作用：修改共享变量 由于闭包可以访问外部函数的变量，如果不小心修改了这些变量，可能会导致意想不到的副作用。 function outer() { let counter = 0; return { increment: function() { counter++; }, getCount: function() { return counter; } }; } const myCounter = outer(); myCounter.increment(); myCounter.increment(); console.log(myCounter.getCount()); // 输出 2在这个例子中, 虽然我们希望 counter 变量是 outer 函数的私有变量, 但是通过闭包, 我们仍然可以在外部修改它. 解决方法: 最小化共享： 尽量减少闭包对外部变量的修改，优先使用局部变量。 使用不可变数据： 如果外部变量是对象或数组，尽量使用不可变数据结构，避免意外修改。 更明确的接口: 如果确实需要修改, 那么就通过定义明确的接口来修改。 图片
-
JavaScript 循环中的闭包陷阱：“意料之外” 的共享 闭包 (Closure) 无疑是 JavaScript 中最强大、最迷人的特性之一。它赋予了函数访问其定义时所在词法环境的能力，即使该函数在其定义的作用域之外执行。凭借闭包，我们可以实现数据封装、模块化、柯里化等高级编程技巧。 然而，硬币的另一面是，闭包也常常被视为 JavaScript 中最容易误解、最容易出错的特性之一。稍有不慎，就会掉入闭包的“陷阱”，导致内存泄漏、意外的变量共享等问题。 图片 在循环中使用闭包时，很容易出现意外的变量共享问题。 图片 在这个例子中，我们期望 setTimeout 的回调函数（闭包）分别输出 0, 1, 2, 3, 4。但实际输出的却是 5 次 5。这是因为 setTimeout 是异步执行的，当回调函数执行时，循环已经结束，i 的值已经变成了 5。而且，由于使用了 var 声明 i，所有的回调函数共享的是同一个 i 变量。 解决方法： 使用 let 声明循环变量：let 具有块级作用域，每次循环都会创建一个新的 i 变量，避免了变量共享。 图片 使用立即执行函数 (IIFE)：创建一个立即执行函数，将循环变量 i 作为参数传递进去，形成一个闭包，每次循环都会创建一个新的作用域。 图片 使用bind方法：使用 bind 方法将循环变量 i 绑定到回调函数上。 图片
-
JavaScript 内存泄漏：“永不消逝” 的变量 闭包最常见的陷阱就是内存泄漏。当一个闭包引用了外部函数的变量，而这个闭包又被长期持有（例如，作为事件处理程序或定时器回调），那么外部函数的变量就无法被垃圾回收，导致内存泄漏。 function createHandler() { let largeObject = new Array(1000000).fill("data"); // 创建一个大对象 return function() { console.log("Handler clicked"); // 没有直接使用 largeObject, 但由于闭包的存在, largeObject 无法被回收 }; } document.getElementById("myButton").addEventListener("click", createHandler());在这个例子中，createHandler 函数返回一个事件处理函数（闭包）。这个闭包引用了 createHandler 函数的 largeObject 变量。即使我们没有在事件处理函数中直接使用 largeObject，但由于闭包的存在，largeObject 无法被垃圾回收，导致内存泄漏。 解决方法： 解除引用：在不需要闭包时，手动解除对闭包的引用，例如： let handler = createHandler(); document.getElementById("myButton").addEventListener("click", handler); // ... 当不再需要事件处理程序时 ... document.getElementById("myButton").removeEventListener("click", handler); handler = null; // 解除对闭包的引用避免不必要的闭包：如果不需要访问外部函数的变量，就不要创建闭包。 将变量设置为null: 在闭包中, 将不再需要的外部变量手动设置为null。 图片
-
16 个 JavaScript 简写神技，代码效率提升 60%！ JavaScript 是一门强大且灵活的语言，拥有丰富的特性和语法糖。分享下 16 个最常用的 JavaScript 的简写技巧，掌握它们可以让我们编写出更简洁、更优雅的代码，并显著提升开发效率（增加摸鱼时间）。 图片 1. 三元运算符简化条件判断 // 传统写法 let result; if (someCondition) { result = 'yes'; } else { result = 'no'; } // 简写方式 const result = someCondition ? 'yes' : 'no';2. 空值合并运算符 // 传统写法 const name = user.name !== null && user.name !== undefined ? user.name : 'default'; // 简写方式 const name = user.name ?? 'default';3. 可选链操作符 // 传统写法 const street = user && user.address && user.address.street; // 简写方式 const street = user?.address?.street;4. 数组去重 // 传统写法 function unique(arr) { return arr.filter((item, index) => arr.indexOf(item) === index); } // 简写方式 const unique = arr => [...new Set(arr)];5. 快速取整 // 传统写法 const floor = Math.floor(4.9); // 简写方式 const floor = ~~4.9;6. 合并对象 // 传统写法 const merged = Object.assign({}, obj1, obj2); // 简写方式 const merged = {...obj1, ...obj2};7. 短路求值 // 传统写法 if (condition) { doSomething(); } // 简写方式 condition && doSomething();8. 默认参数值 // 传统写法 function greet(name) { name = name || 'Guest'; console.log(`Hello ${name}`); } // 简写方式 const greet = (name = 'Guest') => console.log(`Hello ${name}`);9. 解构赋值 图片 10. 字符串转数字 图片 11. 多重条件判断 图片 12. 快速幂运算 图片 13. 对象属性简写 图片 14. 数组映射 图片 15. 交换变量值 图片 16. 动态对象属性 // 传统写法 const obj = {}; obj[dynamic + 'name'] = value; // 简写方式 const obj = { [`${dynamic}name`]: value };欢迎补充。
-
掌握这 8 个 JavaScript 的 Promise 并发控制技巧，性能大幅提升 Promise 已经成为 JavaScript 里处理异步操作的标准方式。然而，当我们需要同时处理多个异步任务时，如何有效地控制 Promise 的并发，就成为了一个影响性能和用户体验的关键问题。 假设，你需要同时请求 100 个接口来获取数据。如果一股脑地发起所有请求，可能会导致以下问题： 浏览器并发限制：浏览器对同一域名的并发请求数量有限制（通常是 6-8 个）。过多的请求会被阻塞，导致页面加载缓慢 服务器压力过大：大量并发请求可能会给服务器带来巨大的压力，导致响应变慢甚至崩溃 资源竞争：多个异步任务同时访问共享资源（例如数据库连接、文件等），可能会导致资源竞争和死锁 用户体验差：页面长时间处于加载状态，用户体验极差 因此，我们需要对 Promise 的并发进行控制，在保证任务执行效率的同时，避免对系统资源造成过大的压力。 Promise.all：并行执行，统一返回 Promise.all 接收一个 Promise 数组作为参数，并行执行所有 Promise，并在所有 Promise 都 fulfilled 后，返回一个包含所有结果的数组。 const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(results => { console.log(results); // 输出：[1, 2, 3] });适用场景： 多个异步任务之间没有依赖关系，可以并行执行。 注意： 如果其中任何一个 Promise 被 rejected，Promise.all 会立即 rejected，并且只返回第一个 rejected 的原因。 Promise.allSettled：并行执行，返回所有状态 Promise.allSettled 与 Promise.all 类似，也是并行执行所有 Promise，但它会等待所有 Promise 都 settled（fulfilled 或 rejected），并返回一个包含所有 Promise 状态和结果（或原因）的数组。 const promise1 = Promise.resolve(1); const promise2 = Promise.reject("Error"); const promise3 = Promise.resolve(3); Promise.allSettled([promise1, promise2, promise3]) .then(results => { console.log(results); /* 输出： [ { status: 'fulfilled', value: 1 }, { status: 'rejected', reason: 'Error' }, { status: 'fulfilled', value: 3 } ] */ });适用场景： 需要获取所有 Promise 的执行结果，无论它们是 fulfilled 还是 rejected。 Promise.race：并行执行，谁快用谁 Promise.race 接收一个 Promise 数组作为参数，并行执行所有 Promise，只要其中任何一个 Promise settled（fulfilled 或 rejected），Promise.race 就会返回该 Promise 的结果（或原因）。 图片 适用场景： 只需要获取最快完成的 Promise 的结果，例如设置请求超时。 Promise.any (ES2021)：并行执行，返回第一个 fulfilled Promise.any 接收一个 Promise 数组作为参数，并行执行所有 Promise，只要其中任何一个 Promise fulfilled，Promise.any 就会返回该 Promise 的结果。如果所有 Promise 都 rejected，则返回一个 AggregateError。 图片 适用场景： 需要获取第一个成功的 Promise 的结果。 自定义并发控制函数：限制最大并发数 Promise.all 等方法虽然可以并行执行 Promise，但无法控制并发数量。我们可以自己实现一个函数来限制最大并发数。 图片 使用示例： 图片 原理： tasks: 一个包含任务函数的数组，每个任务函数返回一个 Promise。 limit: 最大并发数。 results: 存储所有任务的结果。 running: 存储当前正在执行的任务（Promise）。 current: 指向下一个要执行的任务。 while 循环：只要还有任务未执行或有任务正在执行，就继续循环。 if 条件：如果当前正在执行的任务数量小于 limit 且还有任务未执行，则取出下一个任务执行，并将其添加到 running 数组中。 task.then()：监听任务完成，将结果添加到 results 数组，并将任务从 running 数组中移除。 await Promise.race(running)：如果当前正在执行的任务数量已达到 limit，则等待任意一个任务完成。 Promise.all(results): 等待所有任务执行, 并返回结果。 使用第三方库：p-limit、async-pool 等 有一些成熟的第三方库可以更方便地实现 Promise 并发控制，例如： p-limit： 一个轻量级的 Promise 并发控制库。 图片 async-pool： 一个支持多种并发策略的 Promise 并发控制库。 使用 Generator 函数和 yield 关键字 Generator 函数可以暂停和恢复执行，结合 yield 关键字，可以实现更细粒度的并发控制。 async function* taskGenerator(tasks) { for (const task of tasks) { yield task(); } } async function runTasks(tasks, limit) { let pool = []; let results = []; for await (let result of taskGenerator(tasks)) { pool.push(result); results.push(result); if (pool.length >= limit) { await Promise.race(pool); pool = pool.filter(p => p.status != 'fulfilled' && p.status != 'rejected') // 手动维护 } } return Promise.all(results) }使用消息队列 对于非常大量的异步任务, 且允许一定的延迟, 可以使用消息队列(例如 RabbitMQ, Kafka 等), 将任务放入队列, 然后由多个消费者并行处理. 欢迎补充。
-
CSS 计算属性 介绍 CSS 计算属性，特别是 calc() 函数，是现代前端开发中非常强大且灵活的工具。它允许开发者在声明 CSS 属性值时进行动态计算，从而实现更加响应式和适应性强的设计。 calc() 函数支持基本的数学运算符：加法（+）、减法（-）、乘法（*）以及除法（/），并且可以混合使用不同类型的单位，如像素（px）、百分比（%）、视口单位（vw, vh）等。 基本概念与语法 calc() 的基本语法如下： property: calc(expression);这里，expression 是一个由数值、单位和运算符组成的表达式。例如，你可以这样设置一个元素的宽度，使其等于父容器宽度的 50%，然后减去 20 像素： .container { width: calc(50% - 20px); }使用场景 响应式布局：通过结合相对单位（如 % 或 vw/vh）和绝对单位（如 px），calc() 可以帮助你创建能够根据屏幕尺寸自动调整大小的布局。 居中对齐：利用 calc() 进行简单的数学运算，轻松实现水平或垂直居中。 自适应间距：为元素间的间距提供基于视窗大小或其他变量的动态调整。 字体大小：结合视口单位 (vw) 和固定单位 (px)，使文本大小随屏幕变化而适当缩放，提升可读性。 注意事项 空格要求：在 calc() 中，运算符前后必须有空格，否则会导致解析错误。例如 width: calc(100% -8px); 是无效的，正确的写法应该是 width: calc(100% - 8px);。 嵌套限制：虽然 calc() 支持嵌套使用，但应当避免过于复杂的嵌套，因为这可能导致浏览器兼容性问题或解析错误。尽量保持表达式的简洁。 不支持高级数学运算：calc() 不支持更高级的数学函数，如幂次方、平方根等。对于这些需求，可能需要借助 JavaScript 或其他方法来实现。 实际案例 假设我们有一个包含多个项目的网格布局，每个项目之间需要一定的间隔。我们可以使用 calc() 来确保即使在不同屏幕尺寸下，项目之间的间隔也保持一致： .grid-item { width: calc((100% / 3) - 20px); /* 三列布局，每列间留有20px间距 */ margin: 10px; }在这个例子中，grid-item 的宽度被设定为总宽度的三分之一减去固定的边距，从而保证了无论屏幕大小如何变化，项目之间的空间都保持一致。 其他相关函数 除了 calc() 之外，CSS 还提供了其他几个用于计算属性值的函数，比如 min(), max(), 以及 clamp()。这些函数各自具有独特的优势，适用于特定的场景： min() 和 max()：分别返回一组值中的最小值和最大值，有助于在多种条件之间选择最合适的尺寸。 clamp()：定义一个范围，并在该范围内取值，非常适合于创建既响应用户偏好又符合设计意图的布局。 总结 calc() 函数及其相关的计算属性极大地增强了 CSS 的表现力，使得网页设计变得更加灵活多变。 掌握这些技术可以帮助你解决许多常见的布局挑战，同时创造出更加美观和用户体验友好的界面。 随着浏览器对这些功能的支持日益增强，现在正是开始探索并应用它们的最佳时机。 如果你正在寻找一种方法来优化你的网站布局或解决特定的设计难题，那么深入研究 calc() 及其相关函数将是非常值得的投资。 图片
-
使用一行 CSS 去除图像背景 通过一个 CSS 属性，你就能去除任何图像的背景。 这一属性在大多数现代浏览器中都得到了支持。 假设你遇到这样的情况： 你已经完成了一个很棒的布局，完全响应式，效果也如预期。 但有几张图像的背景与网站的背景不匹配，就像下面这张图： 图片 图像的背景颜色与预期的背景色完全不同。 通常，你可能首先想到的是调整设计： 更改背景色，使其与图像的背景色匹配。 但其实不需要这样做…… 在 CSS 中，有一个叫做 mix-blend-mode 的属性，就是在这里发生了“魔法”。 什么是 mix-blend-mode？ HTML 不是编程语言，它没有严格的语法和逻辑规则。 你的网站中，图像通常被包含在各自的 div 元素中，每个 div 元素都有自己的背景色，而每个图像也有自己的背景。 那 mix-blend-mode 如何起作用呢？ 当你对图像元素应用 mix-blend-mode 属性时，浏览器会开始对比图像和 div 元素的颜色。 例如，如果你设置样式为 mix-blend-mode: darken，浏览器会逐像素地进行颜色对比。 这意味着，在每个位置，浏览器会比较图像和 div 元素的两个像素。 如果设置了 darken，那么较暗的像素会被保留。 图片 举个例子： 假设 div 的背景比图像的背景更暗，那么 div 背景的颜色会被保留，图像的背景颜色则会被“去除”。 如果图像背景的亮度比 div 更高，那么图像的背景就会“消失”，而与 div 的背景混合。 这时，看起来图像的背景好像被去除了，但实际上它只是与 div 的背景融合了。 如何判断哪个颜色更暗？ 很简单…… 你可以将这两种颜色转换为 HSL 颜色模型，它包含三个参数： 色调 (Hue) 饱和度 (Saturation) 亮度 (Lightness) 其中，亮度值越高，颜色就越亮。所以，在进行比较时，亮度值较低的颜色会被保留。 图片 通常情况下，产品的颜色会比背景颜色更强烈，也更暗。因此，产品的实际图像保持原样，而图像背景会与 div 背景融合，看起来就像图像的背景已经被去掉了。 浏览器支持 图片 总结： 通过使用 mix-blend-mode 属性，尤其是 darken 模式，你可以轻松去除图像的背景，并让它和网页背景无缝融合。这不仅省去了繁琐的设计修改，还能在不改变图像的前提下，完美匹配网站的设计风格。 这样一来，你就能用一行 CSS 去实现图像背景的去除，效果又简单又直观。
