4

プレーンな HTML と CSS でグラデーション テキストを作成しようとしています。以下のテキストのようなもの

FIDDLEを確認してください。それは自明です。

これを webkit-browsers でのみ実現する方法を知っています。しかし、少なくとも IE8 までの後方互換性を持つクロスブラウザ ソリューションが必要です。

グラデーションを生成する方法を知っています。それは問題ではありません。フィドルでは、webkit ブラウザー用のグラデーションのみを作成しましたが、IE 用にもグラデーションを作成する方法を知っています。私の主な問題は、テキストを透明にして、基になる div のグラデーションを表示する方法です。

JS/jQuery ソリューションは使用しないでください。

コード

HTML

<div id="div1" style="width:200px;height:200px"></div>
<div id="div2" style="width:200px;height:200px">CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO HAVE COLORED GRADIENTS LIKE THE HELLO WORLD TEXT</div>

CSS

#div1 {
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
}
#div1 {
    z-index:-100;
    position:absolute;
    left:0px;
    top:0px;
}
#div2 {
    z-index:100;
    left:10px;
    top:10px;
    background: black;
    text-align:center;
    font-size:20px;
    color: rgba(255, 255, 255, 0.5);
    position:absolute;
}

編集:私の質問は明確ではないと思います。グラデーションについて知っています。下の div のグラデーションが透明なテキストに表示されるように、テキストを透明にしたいです。

この例のようなもの

4

6 に答える 6

1

background-clipを探していると思います。問題は、画像を使用する必要があることです.CSSグラデーションは使用できません

更新：ただし、Webkitでのみサポートされています..

于 2013-09-10T07:42:49.957 に答える
1

次のトリックは、テキスト/コンテンツが無地の背景にある場合にのみ機能します。

このブログ記事の要点をまとめています

  1. spanたとえば、テキスト コンテナーに 空のwith を入れます。 <h1> <span> </span> This this heading </h1>等
  2. ここ background-image [png]まで埋め込むcssspan
  3. テキストの上に絶対に配置します。

IE6 以降で動作しますが、IE PNG ハックが必要です!

それが役に立てば幸い！:)

于 2013-09-13T12:15:03.723 に答える
0

あなたが言っていることが可能だとは思いません...背景がグラデーションの親divがあり、背景が透明ではなく黒の内部divがあるためです（）nou内部divにテキストを書きましたが、フォントの背景が必要です親divにある勾配として...これはcss / css3を使用して可能ではありません...#000000

これで、マークアップと css をほとんど変更せずに同じスタイルを実現できる 2 つの方法 (>=IE 9) を紹介できます。

オプション 1:: (Photoshop の作業が必要です)

背景が黒の<div>セットがあり<div>ます。次に、グラデーション Photoshop の作業 (例.png) を作成します。次に、その画像をフォント/テキストの背景として設定します。background-clip: text; 

webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;

オプション 2:: (上記のプロセスはほとんど時間がかかりません..別のよりスマートな方法があります)

最初divに黒い背景を使用し、次に内側のdivにテキストを書き込みます...内側divの背景をグラデーションとして設定してから使用します-webkit-background-clip: text;-webkit-text-fill-color: transparent;

例えば ​​：：

マークアップ

 <div class="black">
   <div class="a">
      CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO TRANPARENT TO SHOW COLOR OF UNDERLYING DIV SO THAT IT LOOKS LIKE THE "HELLO WORLD" TEXT
   </div>
</div>

CSS

.black{
    background:black;
    overflow:hidden;
 }

.a{
background: #000000 -webkit-linear-gradient(red, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

実際の例

background-clipAT caniuse.com のブラウザー互換性も確認してください。

オプション 3:: (IE8 用にこのスタイルを作成するには) (このプロセスは単純で単純ですが、IE 固有であるためスマートではありません)

Photoshop の作品を作成します..グラデーション効果のあるテキストを作成します..今度は黒の背景で div を宣言します..そしてその画像を<img src="" />タグで含めます. :)

于 2013-09-13T15:08:04.663 に答える