Блог

Главная - Вопросы по программированию - Почему градиентный текст не работает в JavaScript?

Почему градиентный текст не работает в JavaScript?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать градиентный текст с помощью javascript и CSS. Текст не отображается, и если я удалю -webkit-background-clip, текст будет черным, а не градиентным. Вот мой код:

 let gradientText = document.getElementById('title');
gradientText.style.background = '-webkit-linear-gradient(#ccc, #000)'; 
 #title {
    font-size:40px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} 
 <h1 id="title">Gradient text</h1>

Комментарии:

1. » Текст не отображается». … вы точно понимаете, что -webkit-text-fill-color: transparent делает (быстрая лакмусовая бумажка: можете ли вы объяснить в терминах непрофессионала, что он выполняет)? Вы читали документацию к нему ?

2. Текст отображается, просто он прозрачный 🙂 вы пытались выделить текст?

3. @esqew Да, и я видел, как он использовался для градиентного текста во многих местах

4. @Icepickle текст выделяется, но я его не вижу

Ответ №1:

Похоже, вы применили свои правила немного не по порядку. Установите background свойство перед установкой цвета обрезки фона и заливки текста:

 #title {
    background: -webkit-linear-gradient(#ccc, #000);
    font-size:40px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} 
 <h1 id="title">Gradient text</h1>

Комментарии:

1. Он появляется, но текст черный, а не градиентный

2. @pineapplerind0215 — Я обновил свой ответ, чтобы отразить обновленный текст вашего вопроса.

3. Это будет нарушено после перезаписи свойства background с помощью фрагмента js в вопросе

Ответ №2:

Вы также установили webKitBackgroundClip в своем js-коде, чтобы он работал:

 let gradientText = document.getElementById('title');
gradientText.style.background = '-webkit-linear-gradient(#eee, #333)';
gradientText.style.webkitBackgroundClip = 'text'; // this is important 
 #title {
    background: -webkit-linear-gradient(#ccc, #000);
    font-size:40px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} 
 <h1 id="title">Gradient text</h1>

Комментарии:

1. … или вам просто нужно перестать перезаписывать больше, чем предполагалось в первую очередь 🙂 Несмотря -webkit-background-clip на использование синтаксиса префикса поставщика, он фактически настраивается background-clip — поэтому присвоение нового значения свойству background shorthand перезапишет его значением по умолчанию для background-clip . Таким образом, здесь потребуется только ограничение градиента фактическим вложенным свойством background: gradientText.style.backgroundImage = '-webkit-linear-gradient(#eee, #333)';

2. Спасибо за полезный совет CBroe. Совершенно забыл о том факте, что background на самом деле является сокращением

3. @MartinGodzina я тоже 🙂

Метки: