Перекрестный просмотр альтернативы текстовой заливке для создания градиентного прозрачного текста поверх изображения

Question

Я хочу, чтобы над изображением был градиент (цвет к прозрачному).

Мне удалось сделать это с помощью webkit-background-clip. Вот мой код для текста:

background: -webkit-linear-gradient(bottom, #eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 0.3s ease all;

Я бы хотел иметь альтернативу, которая также могла бы работать в старых браузерах, есть ли опция?

РЕДАКТИРОВАТЬ: Я не собираюсь использовать -webkit-background-clip в любом случае, мне было интересно, если есть альтернатива для него

Answer 1

Альтернатива с CSS-градиентами:

body {
  background-color: #eee;
}

.btn-clip {
  background: -webkit-linear-gradient(bottom, #eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.3s ease all;
}

.btn-gradient {
  position: relative;
}
.btn-gradient::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: -webkit-gradient(linear, top, bottom, from(transparent), to(#eee));
  background-image: -webkit-linear-gradient(top, #eee, transparent);
  background-image: -moz-linear-gradient(top, #eee, transparent);
  background-image: -o-linear-gradient(top, #eee, transparent);
  background-image: linear-gradient(to top, #eee, transparent);
}

<span class="btn-clip">Test</span>
<span class="btn-gradient">Test</span>

Answer 2

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

.box {
  font-size: 45px;
  font-weight: bold;
  color: #333;
  display: inline-block;
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, #fff, transparent);
}

.box1 {
  font-size: 45px;
  font-weight: bold;
  background: -webkit-linear-gradient(bottom, #eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="box">
  Some TEXT
</div>
<div class="box1">
  Some TEXT
</div>