Режим наложения в Chrome не применяется должным образом

Работал над повторяющимся фоном, который был в центре внимания, и решил использовать режимы наложения, чтобы добиться этого.

Однако создается впечатление, что режимы наложения не применяются в 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.

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>

Другие вопросы по тегам