CSS mix-blend-mode chrome问题

Question

我需要制作类似 Photoshop 叠加的效果。我的代码在 Firefox 中运行良好，但在 chrome 中无法运行。 有一个fiddle

这是我的代码：

HTML

<img src="http://lorempixel.com/output/fashion-h-c-614-631-5.jpg"/> <div id="blend"></div>

CSS：

img{ max-width:100%; height:auto; }

#blend{ position:absolute; top:0; width:100%; height:100px; z-index:100; background-color:#fff; mix-blend-mode:overlay; }

Answer 1

最新版 Chrome 40.x 未启用 mix-blend-mode 功能。

您可以在 Chrome 或 Opera 中手动启用它：

1. 复制和粘贴 chrome://flags/#enable-experimental-web-platform-features 进入 地址栏，然后回车。

2. 点击该部分中的“启用”链接。

3. 单击浏览器窗口底部的“立即重新启动”按钮。

话虽如此，您应该知道 mix-blend-mode 仅适用于启用了实验功能的客户端。 :(

我本人对发现这一点感到非常失望。

background-blend-mode: overlay; 功能在没有它的情况下可用。

它将混合 background-image 与 background-color 。不，你不能通过使颜色透明来作弊。

希望我们很快就会看到 mix-blend-mode 默认附带 chrome。