我正在尝试使用文本渐变,它适用于 Chrome 和 Safari,但在 Android 上,它会将渐变应用于内容而不是文本(所以你看到的不是带有渐变的文本,而是一个带有渐变——不理想,尤其是因为文本很重要)。
这是我的 SASS 混入:
@mixin text-gradient($from : #2bd2f2, $to : #218bb2) {
text-shadow: none;
background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
知道为什么这行不通吗?
谢谢!
最佳答案
这应该适合您。在您的脚本中实现它,并根据需要更改您拥有的所有变量。如果一切都失败了,你可以在 mixin 之外使用它。
此脚本已在 Android Chrome 上测试并有效。
h1 {
text-shadow: none;
background: #2bd2f2; /* Failsafe color */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2bd2f2), color-stop(99%, #218bb2));
background: -webkit-linear-gradient(top, #2bd2f2 0%, #218bb2 99%);
background: linear-gradient(to bottom, #2bd2f2 0%, #218bb2 99%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
您可能已经发现此方法与许多浏览器的兼容性不是很好。这就是为什么我可能会推荐 html5 中的 Canvas 选项来绘制带有渐变的文本。 这些链接可以在整个过程中为您提供帮助。
https://www.inkling.com/read/html5-canvas-fulton-fulton-1st/chapter-3/text-and-the-canvas-context
关于android - Android 上的 CSS3 文本渐变不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15133585/