小编Adr*_* MK的帖子

目前我无法将 PNG 图像与 CSS 渲染的渐变混合。代码如下所示：

background: linear-gradient(to right, red , blue), url(img/water.png);
background-blend-mode: overlay;

使用渐变时不应用混合模式（以及支持背景混合模式的最新 Chrome Canary Build）。然而，当使用纯颜色作为背景时，它会被应用，例如rgb(38, 38, 219) url(img/water.png)

这是 CSS 背景混合模式规范的限制还是我做错了什么？

我想要做的就是将 PNG 覆盖在渐变上，创建一种我无法实现的效果，例如让 PNG 具有较小的不透明度或开始对 PNG 进行着色。

假设我有一个div，并应用了渐变作为背景属性。我现在想要覆盖一个黑色 PNG（较小尺寸）并将 PNG 设置为具有覆盖的背景混合模式。不幸的是我不知道如何实现这一目标。

我知道当我使用 PNG 图像将渐变渲染到 Div 的 CSS 中时，我可以有一个工作背景混合模式，如下所示：

background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;

然而，这会导致渐变与实际 PNG 一样小，这不是理想的效果，如下所示：

我想用纯 CSS 实现这一点（如果可能的话）：

这里有一个 Codepen 来说明我想要做什么：http://codepen.io/anon/pen/zxOXGP 注意黑色图标。我想覆盖这个。