Свойство background-blend-mode - кто использовал?

Когда в проекте встает цель для каких-либо блоков делать несколько слоев, например для картинки контента нужно наложить оверлей а поверх оверлея, скажем еще какой-либо элемент, какие способы вы используете?

1) Первый и самый банальный — создать несколько div-ов с абсолютным позиционированием. Но, кунг-фу мастера говорят, что это уже колхоз.

2) Использование ::before и ::after — как по мне отличный вариант, но вроде как старые браузеры не знают об этом ничего

3) Использование свойства background-blend-mode. Вот собственно про это свойство и хотел узнать — пользуетесь ли им, и нормально ли оно отрабатывает на старых браузерах? Да и по записи весьма лаконично выглядит:

.my-div {
  width: 300px;
  height: 300px;
  background-image: linear-gradient(45deg, #f8a261, #6e9fc9), url(/upload/prop/1.jpg);
  background-blend-mode: overlay;
}

Возможно, есть более действенные и эффективные способы, буду благодарен за тык носом

Использование свойства background-blend-mode

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

внизу совместимость

Использование ::before и ::after — как по мне отличный вариант, но вроде как старые браузеры не знают об этом ничего

Старые, это какие? IE8?

developer.mozilla.org/ru/docs/Web/CSS/::before

внизу таблица совместимости

Старые, это какие? IE8?

На форумах пишут, что как на самом деле обстоят дела со совместимостью — никто не знает точно. И все сравнительные таблицы нещадно врут. background-blend-mode — тоже сравнительно новое свойство по сути.

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

Я правда не фронтендер, но моё мнение — второй способ. А про background-blend-mode старые браузеры так же мало чего знают :)

И все сравнительные таблицы нещадно врут.

caniuse в помощь. А псевдоэлементам сто лет в обед. 

caniuse в помощь

Хм, занятный сервис, спасибо!

Поддержка самого свойства вполне приличная. А вот предугадать интерпретацию значений браузерами предугадать проблематично.

При выборе свойство vs псевдоэлемент, свойство побеждает в 3-х случаях: нужно поведение характерное именно для свойства (псевдоэлементам оно не присуще); нужно сразу несколько наложений (никаких псевдоэдементов не напасёшся); псевдоэлементы нужны для чего-то иного.

Итого: разобрались, нравится, — используем

Нашел на хабре интересную статью о свойстве — https://habr.com/ru/company/poiskvps/blog/423115/ — прям чудеса чудесные можно творить с его помощью. 

Итого: разобрались, нравится, — используем

Да, буду использовать. Предполагаю, что если похимичить и добавить пару капель js, то можно строить вполне себе приличные параллакс-эффекты без использования дополнительных библиотек. Хотя параллакс мне не нужен, задача стояла определить оптимальный способ работы со слоями)