css - 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 个背景，并使用渐变创建点

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