Chrome中的混合模式无法正常应用

Question

正在努力寻找具有聚光灯的重复背景，并决定使用混合模式来实现这一目标。

但是，似乎混合模式不适用于Chrome。

在这里复制：http://jsfiddle.net/pptn4f5v/7/

body {
    background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"), url("https://dl.dropboxusercontent.com/u/10686242/background-blend%20-%20Copy.png") #030303;
    background-repeat: repeat, no-repeat;
    background-blend-mode: multiply, normal;
    background-size: auto, contain;
}

这是Chrome的限制吗？这在Firefox中非常完美。

Answer 1

可能是Chrome中的错误

但是，您可以更轻松地获得此效果，并且在两种浏览器中都可以正常使用

仅使用2个背景，并使用渐变

创建斑点

＆＃13;

＆＃13;

.test {
    background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"), 
          radial-gradient(circle at 250px 100px, transparent 50px, #606060 150px);
    background-blend-mode: darken;
  height: 400px;
}

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;