Chrome 中的混合模式未正确应用

Question

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

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

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>

Chrome 中的混合模式未正确应用

Blend mode in Chrome not applying properly

css

google-chrome

background-blend-mode