Как сделать в CSS линейный градиент, который становится прозрачным, а не белым? [дубликат] ⇐ CSS

[Anonymous]

Сейчас у меня есть градиент:

Код: Выделить всё

background: linear-gradient(
to right,
rgba(var(--white-rgb), 1) 0%,
rgba(var(--white-rgb), 0) 100%
);

При этом слева он становится чисто белым, а справа — прозрачным. Если у вас есть изображения с разбивкой по страницам влево, то это выглядит так:

Изображение здесь темно-серое (это может быть любое изображение, это просто заполнитель), а фон содержимого имеет разные цвета в зависимости от того, где используется прокрутка изображения с нумерацией страниц (в данном случае он светло-серый, но может быть зеленого, красного, синего или других неизвестных цветов). Изначально мы планировали, что фон всегда будет белым, поэтому переход к чисто белому имел смысл. Но теперь это выглядит не так.
Как я могу сказать «сделать основной контент прозрачным» слева? По сути, начните с прозрачного градиента справа, затем затемните фоновое содержимое до прозрачного слева. Возможно ли что-то подобное?
В противном случае мне, возможно, придется сообщать градиенту в каждом случайном случае, в какой цвет фона должен плавно переходить, что, вероятно, потребует серьезного рефакторинга, поэтому интересно, будет ли Я могу избежать этого.
ChatGPT посоветовал попробовать следующее:

Код: Выделить всё

mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%, /* Fully transparent on the left */
rgba(0, 0, 0, 1) 100% /* Fully opaque on the right */
);

Но это не работает, моя структура DOM примерно такая:

Код: Выделить всё

[img]...[/img]

[img]...[/img]

Я бы добавил эту маску слева от страницы, но она, кажется, не применима к пути под ней.

Подробнее здесь: https://stackoverflow.com/questions/790 ... ite-in-css