Bennett Feely 一直在出色地 向人们展示 CSS 混合模式的魅力。我们习惯于在静态设计中（感谢 Photoshop）看到许多设计效果，但在网络上，尤其是在动态内容中，我们并不常看到。但随着 CSS 混合模式获得更多支持，这种情况将会改变。我想看看实现它的不同方法，因为它并不完全是现成的。
CSS 多个背景混合模式
您可以将 background-image 混合在一起，或将它们与背景颜色混合。这很简单，如下所示：
.blended {
background-image: url(face.jpg);
background-color: red;
background-blend-mode: multiply;
}查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的笔 背景混合。
Multiply 是 一个不错且有用的模式，但还有：screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color 和 luminosity。还有 normal 用于重置。
Adobe（参与了 此功能的规范制定）创建了这个笔来展示不同的可能性。. 更新：他们已删除了该笔，但仍然保留了 此说明页面。
单个元素可以拥有多个背景，堆叠起来。例如
.graphic-or-whatever {
background:
url(grid.png),
url(building.jpg)
}这些也可以通过添加 background-blend-mode 简单地混合。
查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的笔 多个背景混合。
这是一个由 Bennett Feely 提供的酷炫且实用的示例
查看 CodePen 上 Bennett Feely (@bennettfeely) 编写的笔 rxoAc。
这是另一个示例，它巧妙地重新组合了分离成青色/品红/黄色/黑色部分（CMYK）的彩色图像。您知道这就是印刷中的胶印工作原理，对吧？=)
查看 CodePen 上 Bennett Feely (@bennettfeely) 编写的笔 使用 background-blend-mode 进行 CMY/CMYK 彩色印刷。
任意 HTML 元素混合模式
将背景混合在一起非常酷，但就我个人而言，我对此并没有像将任意 HTML 元素混合在一起那样兴奋。例如，在背景上覆盖一个 <h1> 标题。或者甚至是在文本上覆盖文本。
前几天我在机场看到了这个，并拍了一张照片，因为我觉得它看起来很整洁，并且我认为我可以弄清楚如何在网络上实现它。
我第一次尝试重现它时，使用了不透明度。但是不透明度确实会使颜色变暗，并且不会使那些重叠的部分具有应有的额外暗度。CJ Gammon 向我展示了有一个专门用于此目的的混合属性：mix-blend-mode。
因此，要重现此效果
<h1>hungry?</h1>然后使用 Lettering.js 将其分解成 。
$("h1").lettering();然后使用负字间距将字母挤压在一起，设置 mix-blend-mode 并着色
h1 {
font-size: 7rem;
font-weight: 700;
letter-spacing: -1.25rem;
}
h1 span {
mix-blend-mode: multiply;
}
h1 span:nth-child(1) {
color: rgba(#AB1795, 0.75);
}
/* etc, on coloring */比较
查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的笔 重叠字母。
就像我提到的，如果您问我，真正的网络文本叠加在图像上是一个非常棒的用例。
查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的笔 GxlBm。
Canvas 混合模式
DOM 混合模式对我来说最有趣，但需要注意的是 <canvas> 也具有混合模式，并且具有更深层次的支持（请参见下文了解所有内容）。
您可以在画布上下文中设置它。例如
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';该值可以是我上面列出的任何一个。这是一个简单的演示
查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的笔 canvas 混合模式。
以及一个花哨的演示，您可以看到混合赋予了演示活力
查看 CodePen 上 Justin Windle (@soulwire) 编写的笔 sketch.js 演示。
SVG 混合模式
正如您可能猜到的，SVG 确实有自己的机制来执行此操作。一种方法是在 <svg> 本身中定义它，这相当复杂
<svg>
<defs>
<filter id="f1" x="0" y="0" width="1" height="1">
<feImage xlink:href="#p1" result="p1"/>
<feImage xlink:href="#p2" result="p2"/>
<feBlend mode="multiply" in="p1" in2="p2" />
</filter>
<path id="p1" d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
<path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
</defs>
<rect width="100%" height="100%" filter="url(#f1)"/>
</svg>查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的笔 Fnvdp。
以及 一个更复杂的示例。
好消息是 mix-blend-mode 将适用于内联 SVG。因此，如果您以这种方式使用 SVG，则可以使用类或任何其他方式定位形状本身，并为其提供所需的任何混合模式。
这是一个由 Bennet 提供的示例，它正是这样做的
查看 CodePen 上 Bennett Feely (@bennettfeely) 编写的笔 KDkCj。
浏览器支持
对于 canvas： Firefox 20+、Chrome 30+、Safari 6.1+、Opera 17+、iOS 7+、Android 4.4+。最坏的消息是：IE 不支持。
对于 HTML/CSS： Firefox 30+、Chrome 35+、Safari 6.1（显然不支持 7？）。支持度不如 canvas。
目前，对于 Chrome，您需要运行 Canary，转到 chrome://flags/ 并启用“实验性 Web 平台功能”。
这实际上有点复杂，因此，如果您确实想深入了解并了解支持情况，请查看 Adobe 提供的 支持矩阵。
渐进增强
混合的好处在于，其核心是设计效果。如果它们不受支持，您可以确保回退仍然可读（渐进增强！）。
这是 Jeremy Keith 的 一篇近期想法
完全有可能——甚至可以说是可取的——在每个浏览器都支持之前就使用这些功能。这就是我们推动网络发展的方式。
因此，一种支持方式是在不支持的浏览器中查看设计，如果它仍然可读/可用，那么您就完成了，无需进一步操作。
如果结果最终不可读/不可用，您可以调整内容直到它们可读/可用，或者运行测试以确定支持情况，并在不支持的情况下执行某些特定操作。
要测试支持情况，我想您可以测试要使用的属性
var supportsMixBlendMode = window.getComputedStyle(document.body).mixBlendMode;
var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;如果返回值为“normal”（或除 undefined 之外的任何值），则表示支持存在，否则不存在。然后可能将一个类应用于 <html> 元素，以便您可以知道这一点并在 CSS 中的任何位置使用它来调整内容，类似于 Modernizr 的风格。也许他们将来甚至会为此进行测试。
除非它没有那么简单，如果是这样，请告诉我。
需要更多想法？查看 此合集。混合愉快！
我不确定，但我认为混合模式导致我的 iPhone 5s 上的移动 Safari 崩溃。其他人也遇到同样的问题吗？
太棒了。我想知道 Adobe 是否有意试图通过最终能够在无需使用图像编辑器的情况下编写整个项目来使其旗舰软件过时。嗯。
他们现在已经相当直白地表明了他们试图淘汰 Flash 的意图，即使他们还没有公开承认。我怀疑他们认为 Flash 是他们一些更新的网页设计软件的竞争对手，而且我也不会感到惊讶，如果他们打算为游戏开发等领域创造一些更新、更简洁的东西。
所以你认为图像编辑器会过时，因为你可以用文本编辑器做同样的事情？好吧，那么为什么要使用数码相机呢，当你可以用代码记录你的假期回忆时呢？
我迫不及待地想在 Chrome 稳定版达到 35 时重新阅读这篇文章。在 33.0.1750.117 版本中，顶部图像是不透明的（这是预期的）。
对于使用 Canary（或类似的 Firefox nightly 版本）的用户，性能如何？根据它的速度快慢，可能不值得从预渲染图像切换到这种方法，至少现在还不是。
这很奇怪，我在 OS X Mavericks 上使用相同的 Chrome 版本，它对我来说运行良好。
Covarr，你在 Chrome 中启用了实验功能了吗？在我的 Windows 7 上的 Chrome 33.0.1750.146 版本中运行良好。
这非常酷，我绝对认为文本叠加可能是最好的用法。至少，我可能会最常使用它。
对于我们这些没有关注 nightly 版本说明，并且可能在一些最近的支持公告方面稍微落后的人（我，像我们大多数人一样，最近工作时间太长了），一篇快速的可使用性图表对于这篇文章来说将非常有帮助。我同意 Covarr 的说法……我期待在它真正与浏览器版本匹配时阅读这篇文章。
你最初的不透明度版本可以正常工作，但你使用的颜色要亮 20%（如果是不透明度为 80% 的话），所以你只需要使用一开始颜色暗 20% 的颜色，这样你最终就能得到原始色调，但色度为 80%。
我已经在使用这个了，但我发现了一些缺陷，在 Internet Explorer 7 上（我知道，别问我 lol），当我将鼠标悬停在滚动图像上时，它会先向上滚动，然后再向下滚动！还有其他人遇到这个问题吗？我也在使用 1280px X 968px 的分辨率。
当涉及到混合模式时，IE7 并不是你最担心的问题。它们（目前）在 Chrome 的稳定版本中不起作用，即使在 Chrome Canary 中，你也必须开启实验模式。我猜 IE10（甚至 IE11？）都不支持这个……
但当它得到完全支持时，将会非常棒！
CSS 混合看起来很酷。打算尝试背景图像和文本混合。感谢分享。
目前支持度非常低，但这意味着 Photoshop 的使用率会更低（这总是受欢迎的）。
我一直欢迎任何能够让我摆脱依赖 Photoshop 创建图形的事情，尤其是在网站内容由客户或没有内部图形设计的第三方管理的情况下。目前，我正在使用不透明度叠加和灰度滤镜的组合来模拟一些效果。
Adobe 的下一个目标：模拟 Photoshop 中被滥用的 chrome 滤镜的 CSS。
太棒了 chris
Carl，是的，没错。至少在这里是这样。我不确定，但那个崩溃可能是设备设置级别的问题。
我是一个新手，我对这个网站的第一印象是，它实际上是由人类构建的……Chris，你做得太棒了，我只会买主题……
但是，我的网站遇到了一些问题，请问我如何才能在博客文章和侧边栏小部件周围添加边框？就像 Sahifa 主题那样。我的主题是在 Genesis 框架上运行的。
感谢精彩的教程！我在 Smashing Magazine 网站上阅读了关于这个和蒙版的文章。他们没有包含“background-”并且没有在 Chrome 中看到变化。再次感谢！
哇哦，阅读了这篇文章，我非常喜欢混合模式的想法，但我遇到了一个相当大的、意想不到的问题，并且花了我一段时间才解决。
启用 Chrome 的“实验性 Web 平台功能”实际上会导致 AdBlock 和 LastPass 无法正常工作——它们的部分内容无法显示。奇怪的连接，但不知何故，当我再次禁用这些“实验性 Web 平台功能”时，问题解决了。希望其他人不会遇到这个问题！
使用 Chrome 35，仍然需要启用实验性 Web 平台功能才能使许多嵌入的 Pens 正确渲染。Adobe 的那个在嵌入时根本无法正确渲染，无论标志是否开启，但在 CodePen 本身查看时则可以正常工作，这很奇怪……
这很奇怪，所有 Pens 对我来说似乎都可以在不开启实验性 Web 平台功能的情况下正常工作。（OS X 上的 Chrome 35）