1

テキストグラデーションを使用しようとしています。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;
}

なぜこれが機能しないのかについて何か考えはありますか？

ありがとう！

4

1 に答える 1

0

これはうまくいくはずです。これをスクリプトに実装し、必要に応じてすべての変数を変更してください。それでも駄目なら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 のキャンバス オプションをお勧めします。これらのリンクは途中で役立ちます。

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

于 2013-09-03T15:30:20.157 に答える