HTML输入渐变文本
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML输入渐变文本相关的知识，希望对你有一定的参考价值。
一直在寻找解决方案，但没有成功，所以我想在这里问。
我正在尝试对输入字段应用线性渐变，就像我对按钮所见，如图所示。
我玩过不同的CSS选项，但未能成功。
最佳版本是占位符的样式，但输入值不是。如果我尝试设置输入值的样式，那么事情就会出错。
建议将不胜感激。
button
background-color: dodgerblue;
height: 60px;
width: 60px;
border-radius: 50%;
font-size: 32px
button i
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
input
background-color: dodgerblue;
height: 60px;
width: 360px;
font-size: 32px
input::placeholder
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/*
input:focus
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
*/<button><i>X</i></button>
<hr />
<input placeholder="SEARCH"/>答案
您将需要两个背景层。一种用于文本，一种用于背景颜色。
不幸的是，由于已知的错误https://bugzilla.mozilla.org/show_bug.cgi?id=1571244，这在Firefox上不起作用]
input background-color: dodgerblue; color:transparent; height: 60px; width: 360px; font-size: 32px input::placeholder background: linear-gradient(#ffffff70, #ffffff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; input:not(:placeholder-shown) background: linear-gradient(#ffffff70, #ffffff), dodgerblue; -webkit-background-clip: text, padding-box; background-clip: text, padding-box; -webkit-text-fill-color: transparent;<input placeholder="SEARCH">
另一答案
如果您尝试在占位符文本上设置渐变，最好的选择是完全省略或删除占位符，并使用所选字体和文本渐变在输入上方设置另一个div。
以上是关于HTML输入渐变文本的主要内容，如果未能解决你的问题，请参考以下文章