0

CSS

    h1 {
      font-size: 72px;
      background: -webkit-linear-gradient(#eee, #333);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

HTML

<h1>Hello World</h1>

Chromeブラウザにグラデーションのある「HelloWorld」テキストが表示されます。-moz、-moなどの他のプレフィックスを追加しても、Firefox、Opera、IEでは表示されません。何が問題になる可能性がありますか？

4

4 に答える 4

3

これを試して

    background: $gradient;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;

私のためにすべてのブラウザで作業しています:)

于 2020-01-20T17:21:13.033 に答える
0

-mozと-o（simoneコメント）にも同じものを追加する必要があります

ここでは、線形グラデーションの例を見つけることができます。
http://www.the-art-of-web.com/css/linear-gradients/#.UNQ9Ztd2EuM

残念
ながら、前のポスターは正しいです
-moz-background-clip：textはFirefoxでは機能しません

于 2012-12-21T10:46:41.770 に答える
0

残念ながら、text-fill-colorプロパティを実装しているのはWebKitベースのブラウザーだけだと思います。私の知る限り、Mozillaの回避策はまだありません。

于 2012-12-21T10:53:03.343 に答える
0

これを確認してください。グラデーションの素晴らしいサイトです。同時に任意のブラウザに任意のグラデーションを作成でき、古いバージョンのieもサポートします。

于 2012-12-21T11:27:17.330 に答える