Блог

Главная - Вопросы по программированию - Градиент текста Webkit со случайными цветами с использованием javascript

Градиент текста Webkit со случайными цветами с использованием javascript

#javascript #html #css

Вопрос:

Я хочу, чтобы определенный текст на веб-странице отображался в цветовом градиенте слева направо, где цвета выбираются случайным образом из списка. Вот мой HTML

 <div id="randomgrad">Random Gradient</div>
<script src="randomgradient.js"></script>

Вот мой CSS

 #randomgrad {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 72px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

и вот сценарий

 var colors = ['#58D68D', '#F1C40F', '#68C4EC', '#EC7063', "#F39C12", "#979A9A", "#40B5AD", "#A52A2A"];
randcol = colors[Math.floor(Math.random() * colors.length)];
randcoltwo = colors[Math.floor(Math.random() * colors.length)];
gradcol = '-webkit-linear-gradient(left,'   randcol   ' ,'   randcoltwo   ')';
document.getElementById('randomgrad').style.background = gradcol;

Что я получаю, так это фон с градиентом случайных цветов, но без текста. Так что почему-то обрезка фона не работает.

Ответ №1:

фоновый клип работает с background-image и background-color (а не background ). В вашем случае — линейный/радиальный градиент, установленный с помощью javascript, вам нужно использовать backgroundImage 

 var colors = ['#58D68D', '#F1C40F', '#68C4EC', '#EC7063', "#F39C12", "#979A9A", "#40B5AD", "#A52A2A"];
randcol = colors[Math.floor(Math.random() * colors.length)];
randcoltwo = colors[Math.floor(Math.random() * colors.length)];
gradcol = '-webkit-linear-gradient(left,'   randcol   ' ,'   randcoltwo   ')';
document.getElementById('randomgrad').style.backgroundImage = gradcol; 
 #randomgrad {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 72px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color:transparent;
} 
 <div id="randomgrad">Random Gradient</div>
Метки: