bg-blend-mode в действии

[Еврейская Мышь]

Доброго времени суток. Уже давно мучает вопрос, который связан со свойством background-blend-mode и градиентом. Суть вопроса в том, что при вёрстке сайта с макета psd, я часто попадаю на фоновое изображение, которому задана функция с наложением градиента с целью частичного затемнения. Так вот у меня не получается реализовать это в самом проекте. Хотелось бы получить толковый ответ по данному вопросу. Пример кода для наглядности: 

body {
    width: 100%;
    background-image: 
        linear-gradient(to top, rgb(0,0,0), rgb(255,255,255)),
        url(Surfers/src/img/bg-about-us.jpg);
    background-blend-mode: normal;
}

 

[mrnobody]

Нужно наверное высоту задать

 

[Еврейская Мышь]

14 минут назад, mrnobody сказал:

Нужно наверное высоту задать

 

Хм, странно, но если работает со значением multiply, но не работает со значением normal, которое по-идее должно быть

[mrnobody]

46 минут назад, Еврейская Мышь сказал:

но не работает со значением normal

Так normal — это значение по умолчанию.

https://developer.mozilla.org/ru/docs/Web/CSS/Reference/background-blend-mode

Это все равно что вы будете задавать background-color: transparent; ведь у бекграунда значение по умолчанию - transparent.

Может в макете сделано не через наложения, а просто картинка и сверху блок с полупрозрачным градиентом, или сам блок полупрозрачный.

[Еврейская Мышь]

6 минут назад, mrnobody сказал:

Может в макете сделано не через наложения, а просто картинка и сверху блок с полупрозрачным градиентом, или сам блок полупрозрачный.

Скрытый текст