background-clip: text;の記述がうまく反映されない

Question

前提・実現したいこと

Complete Portfolio Website with Bootstrap - HTML/CSS
でHTML&CSSの勉強をしています。

発生している問題・エラーメッセージ

background-clip: text;のtextの部分に黄色い波線（利用できるクイックフィックスはありません）が出てしまい、コードが反映されず困っています。

該当のソースコード

.header_area .main-menu .navbar-nav .active a {
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header_area .main-menu .navbar-nav .active a:hover {
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

試したこと

検索をしましたが原因がわからず、コードを書き直しでもうまくいきません。
解決できず行き詰っています。解決策や参考になりそうな記事、ページなどを教えていただけると嬉しいです。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

・VSCodeを使っています。
・bootstrapのバージョンは4.5です。

Comments

[Lhankor_Mhy]

VSCodeですか？

[suuumo]

はい！エディタはVSCodeです（本文追記済）

[Lhankor_Mhy]

気にしなくていいような気がするのですが、実行した際に何か問題が起きるのですか？

[suuumo]

現状問題が発生しており、HTMLコードをプラウザで確認すると、ほとんどのテキストにスタイルが反映されない（HOMEのテキストのみスタイルが反映され、HOME以降のテキストはクリックしてもスタイルが反映されない）状態となっています。

ただコメントを頂いてハッとしたのですが確かに問黄色い波線がついていても気にしなくてもいいような気がしてきました。まだ問題は解決していないのですが、background-clip: text;の値が反映されていない事が原因なのではと勝手に決めつけて質問していたのかもしれません。

[suuumo]

Lhankor_Mhy様
ありがとうございました！問題はbackground-clip: text;ではなく、別のところに合った様です。無事動くようになりました(*^^*)

[Lhankor_Mhy]

ご解決されて何よりです。

Answer 1

原因：コードの記載ミス