為什么漸變文本在 JavaScript 中不起作用？

Question

我正在嘗試使用 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>

Answer 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>

Answer 2

您還在 js 代碼中設置了 webKitBackgroundClip 以使其工作：

 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>