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的限制吗?

Answer 1

可能是Chrome浏览器的bug

然而，你可以更容易地获得这种效果，并且它在两个浏览器中都可以正常工作

只使用2个背景，并创建一个渐变点

.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;
}

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