Наткнулся на интересный трюк. Часто сталкивался с задачей, когда поверх блока надо нарисовать градиент от чёрного к прозрачному. Чтобы поверх какой-нибудь графики текст написать, например, и он был контрастным.
Не задумывался, но для этого же можно использовать
border-image. По сути в него можно поместить градиент, который заполняет весь элемент. И он всё ещё будет под текстом, потому что так работает рендеринг.
.overlay {
border-image: fill 0 linear-gradient(#0003, #000);
}
Попробую в нескольких местах отказаться от псевдоэлементов с аболютным позицинированием и игрой в z-index. Такой приём выглядит сильно проще.
https://frontendmasters.com/blog/quick-trick-using-border-image-to-apply-and-overlay-gradient/
