Question

我正在尝试使用文字渐变，它适用于Chrome＆amp; Safari但在Android上它将渐变应用于内容而不是文本（因此，不会看到带渐变的文本，而是看到带渐变的框 - 不理想，特别是因为文本很重要）。

这是我的SASS mixin：

@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;
}

知道为什么这不起作用？

谢谢！

Answer 1

这对你有用。在您的脚本中实现它，并根据需要更改您拥有的所有变量。如果所有其他方法都失败了，你可以在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

https://www.inkling.com/read/html5-canvas-fulton-fulton-1st/chapter-3/text-with-gradients-and-patterns

Android上的CSS3 Text Gradient无法正常工作

1 个答案: