0Pricing
CSS Academy · 课时

使用 mix-blend-mode 进行图层混合

在 CSS 中使用类似 Photoshop 的混合模式，将元素颜色与下层内容混合。

使用 mix-blend-mode 进行图层混合 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 mix-blend-mode

mix-blend-mode 控制元素的像素如何与下方元素的像素混合，类似于 Photoshop 的图层混合模式。它会影响整个元素，包括元素的背景。

正常（默认）

normal 是默认值，表示不进行混合。上层元素会覆盖其下方的内容。

multiply

multiply 通过相乘像素值来使颜色变暗。白色会变为透明，黑色仍保持黑色。它非常适合将深色调图像放置在彩色背景上。

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

screen

screen 是 multiply 的反向模式，会使颜色变亮。黑色会变为透明，白色仍保持白色。它适合制作光效和发光效果。

<div class="blend-wrapper">
  <div class="glow"></div>
</div>

overlay

overlay 结合了 multiply 和 screen。暗部会变暗，亮部会变亮，同时提高对比度并保留中间调。

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

difference

difference 会执行颜色相减。相同的颜色会生成黑色，相反的颜色会生成白色，从而创建迷幻的高对比度效果。

<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>

强光与柔光

hard-light 会根据源颜色应用 multiply 或 screen。soft-light 是更柔和的版本，对比度提升幅度更小。

颜色混合模式

这些模式只混合特定的颜色属性：

  • hue —— 从上层获取色相，从下层获取饱和度和明度
  • saturation —— 从上层获取饱和度
  • color —— 从上层获取色相和饱和度，从下层获取明度
  • luminosity —— 从上层获取明度

用于双色调效果的 color 模式

通过叠加带颜色的元素并使用 mix-blend-mode: color 来创建双色调图像：

<div class="duotone"></div>

反色文本效果

在任意背景上都能显示反色效果的文本：

<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>

堆叠上下文与混合模式

mix-blend-mode 会与同一堆叠上下文中的元素进行混合。对父元素应用 isolation: isolate 属性会创建新的堆叠上下文，从而防止混合模式影响隔离组之外的元素。

快速检查

哪种混合模式会让元素中的白色部分变为透明，同时保留有色或深色区域，类似于透明纸？

总结

mix-blend-mode 会将元素像素与下方内容混合。主要模式包括：multiply（使颜色变暗，白色 → 透明）、screen（使颜色变亮，黑色 → 透明）、overlay（提高对比度）、difference（相减）和 color（重新着色图像）。请在父元素上使用 isolation: isolate，以限定混合的作用域。

常见问题解答

「使用 mix-blend-mode 进行图层混合」课时是免费的吗？

是的 — 「使用 mix-blend-mode 进行图层混合」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「使用 mix-blend-mode 进行图层混合」这节课中我会学到什么？

在 CSS 中使用类似 Photoshop 的混合模式，将元素颜色与下层内容混合。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「使用 mix-blend-mode 进行图层混合」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. filter：blur、brightness、contrast、grayscale
  2. 使用 backdrop-filter 创建磨砂玻璃效果
  3. 使用 mix-blend-mode 进行图层混合
  4. isolation 属性
← 返回 CSS Academy