Режим наложения в 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>