CSS Cod5雨用户名？它可以被编码吗?如果可以，我该怎么做？
提问于 2017-03-18 22:41:18
所以我刚开始使用css，我目前在一个使用xenforo的论坛上工作。然而，我认为在管理员或版主用户名的位置上看到这种效果是很好的。
如果你们能帮助我，或者给我一些关于如何去做的信息，那就太好了！
这里有一个视频，如果你不知道我的意思是：https://www.youtube.com/watch?v=XdL9iDQs3t8
另外，我正在尝试在css中为xenforo上的"User Name CSS“字段做这一切。我会继续努力解决这个问题，但如果你能帮上忙，谢谢你！
回答 1
Stack Overflow用户
发布于 2018-12-13 18:04:18
与视频中的文本最接近的是在整个短语中使用彩虹渐变，而不是每个字母使用不同的颜色。
我在这里创建了一个示例：
.rainbow_text {
display: inline-block;
background: black;
background: linear-gradient(to right, red, orange , yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rainbow_text.animated {
animation: rainbow_animation 5s ease-in-out infinite;
background-size: 400%;
}
@keyframes rainbow_animation {
0%, 100% {
background-position: 0
}
50% {
background-position: 100%
}
} <h1 class='rainbow_text'>Austen Holland</h1>
<br>
<h1 class='rainbow_text animated'>Austen Holland Animated</h1>
有两个CSS使得这成为可能。background-clip / -webkit-background-clip:和color。
当background-clip属性设置为text时，背景将在前景文本内绘制(剪裁为前景文本)。
当color属性设置为transparent时，文本为..好吧..。透明的。这使得来自背景的渐变可以显示出来！
不过，这里有一些问题，那就是browser support和background-clip: text;！Internet explorer根本不支持它，chrome、opera、safari、android都需要-webkit-厂商前缀。像edge和firefox这样的浏览器支持它，没有前缀。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42880745
复制相关文章
腾讯云开发者
