Как сделать линейный градиент, который плавно переходит в прозрачность, а не в белый цвет, в CSS?

Содержание

Вопрос или проблема
Ответ или решение
Пояснение:
Примечание:
Альтернативный подход:

Вопрос или проблема

У меня сейчас градиент выглядит так:

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%, /* Полностью прозрачный слева */
  rgba(0, 0, 0, 1) 100% /* Полностью непрозрачный справа */
);

Но это не работает, моя структура DOM выглядит примерно так:

<div class="images">
  <div class="image-scroller">
    <div class="image-container">
      <img src="..."/>
    </div>
    <div class="image-container">
      <img src="..."/>
    </div>
    <!-- еще -->
  <div>
  <div class="paginate-left"></div>
  <div class="paginate-right"></div>
</div>

Я бы добавил эту маску на paginate-left, но, похоже, она не применяется к <img>, который находится гораздо ниже.

Ответ или решение

Чтобы создать градиент, который переходит в прозрачность, а не в белый цвет, и при этом работает с любыми цветами фона, вы можете использовать linear-gradient с комбинацией rgba или hsla, чтобы контролировать прозрачность. Приведу пример, как это можно сделать в вашем случае, принимая во внимание структуру DOM.

Предположим, что вы хотите добавить градиент к вашему элементу .paginate-left. Вместо использования mask-image, можно использовать псевдоэлемент ::before, чтобы создать эффект градиента. Вот как это можно реализовать:

.paginate-left {
  position: relative; /* Необходимо для позиционирования псевдоэлемента */
  overflow: hidden; /* Обрезает псевдоэлемент при выходе за пределы */
}

.paginate-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Чтобы кликать по элементам под псевдоэлементом */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%, /* Полностью прозрачный слева */
    rgba(255, 255, 255, 1) 100% /* Полностью непрозрачный справа */
  );
}

Пояснение:

position: relative; на .paginate-left позволяет вам использовать абсолютное позиционирование для псевдоэлемента ::before.
pointer-events: none; на псевдоэлементе позволяет событиям мыши проходить через него, делая нижние элементы доступными для клика.
Градиент создается с использованием rgba для задания прозрачности. На левом краю градиента используется rgba(255, 255, 255, 0) для полной прозрачности, а на правом краю rgba(255, 255, 255, 1) для полного белого цвета. Если ваш фон не белый, вы можете изменить цвет на желаемый.

Примечание:

Если у вас неправильный цвет фона, вы можете настроить значения rgba так, чтобы они соответствовали вашему предпочтению. Например, если предполагается, что фон будет другого цвета, просто подберите его соответствующие значения rgba.

Альтернативный подход:

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

Я надеюсь, что это решение поможет вам добиться желаемого эффекта градиента, который плавно переходит в прозрачность, а не в белый цвет!