0

一部のテキストに純粋なCSS3グラデーション（画像などなし）を適用しようとしていますが、テキストは変更されていません。

私の現在のコードは次のとおりです。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Text Gradients</title>
    <style>
    /* The gradient class */
    .gradient {
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1)));
    }
    </style>
</head>
<body>
     <!--The text with the gradient-->
     <h1 class="gradient"> Hello World </h1>
</body>
</html>
4

4 に答える 4

3

私はこのサイトをお勧めします、これはすべての最新のブラウザで動作します

background-image: linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -o-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -moz-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -ms-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.22, rgb(93,245,172)),
    color-stop(0.61, rgb(121,255,207)),
    color-stop(0.81, rgb(158,255,249))
);

また、 css3pieを使用してみてください。これにより、IEブラウザーで機能するコードを追加できます。

于 2012-08-23T18:05:20.267 に答える
2

次を使用してChromeでグラデーションテキストを作成できました。

h1 {
  font-size: 72px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
于 2012-08-23T18:09:15.430 に答える
1

CSS3をたくさん使用している場合は、-prefix-freeを使用することをお勧めします。これにより、すべてのブラウザプレフィックスをスキップでき、ライブラリは実行時に必要なすべてのプレフィックスを追加します。

使用すると、スタイルは次のようになります。

.gradient {
        mask-image: gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1)));
    }
于 2012-08-23T18:08:48.647 に答える
0

これは、Webkitユーザーに対してのみ機能します。すべてのブラウザをサポートするには、少なくとも次のものが必要です。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

色の値を必要な値に変更します。

編集：@Lokaseが言ったように：彼/彼女のコメントで彼/彼女がリンクしたジェネレーターを使用することもできます。

于 2012-08-23T18:03:45.843 に答える