3

テキストの下に画像を表示したい。Photoshop でこれを行いましたが、これは画像です。そのため、テキストを変更するたびに、Photoshop で変更を行う必要があります。jQuery、CSS3、またはその他の Web 技術を使用して同じことを達成したいと考えています。

これに似たものが欲しいのですが、テキストが変更されるたびに新しい画像を作成するわけではありません

テキストの下の画像

4

4 に答える 4

3

キャンバス

これは、要求どおりに CSS を使用するのではなく、canvas 要素を使用しています。

次の例では、画像をテキストでクリップし、影を追加します。

例

ライブデモはこちら

これを実行した結果は次のようになります。

デモのスナップショット

/// set some text settings
ctx.textBaseline = 'top';  /// defaults to baseline, using top makes life simpler
ctx.font = '150px impact'; /// set the font and size we want to use
ctx.textAlign = 'center';  /// center for example

/// next draw the text
ctx.fillText(txt, demo.width * 0.5, 10);

次のステップは、複合モードを変更して、既に描画されたテキストを次の描画のクリッピングとして使用することです。

/// change composite mode to fill text
ctx.globalCompositeOperation = 'source-in';

/// draw the image you want on top; will be clipped by text
ctx.drawImage(img, 0, 0);

これで、描いた画像が切り取られました。影を追加するには、最初から影を追加したかのように、画像が影の領域にも描画されるように、さらにラウンドする必要があります。

したがって、合成モードをデフォルトにリセットし、影を設定してから、キャンバスを元の状態に戻す必要があります。まったく同じ位置に上に描かれているので、気付かないでしょう。

シャドウを手動でリセットすることを避けるために、ここではsaveandを使用しています。restore

/// reset composite mode to normal
ctx.globalCompositeOperation = 'source-over';

/// create a shadow by setting shadow...
ctx.save();
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 7;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;

/// ... and drawing it self back
ctx.drawImage(demo, 0, 0);
ctx.restore();

デモでは、テキストを変更するループを作成したので、別のテキストを指定するだけで済むことがわかります。

また、背景が透明であるため、キャンバスを他の要素の上に配置できることにも注意してください (デモでは、本体の背景色を変更しました)。

代わりに、デモ コードをユニバーサル関数にリファクタリングすることをお勧めします。そのために、すべての設定をその中に入れsaveて、最初とrestore最後に移動して、関数の外で設定された他の設定を保持することができます。

于 2013-10-13T08:08:39.340 に答える
1

Ken - Abdias Softwareとmplungjanのソリューションを組み合わせて、配列からテキストを変更できる比較的クロスブラウザーな CSS ソリューションを作成することにしました。

Live demo

重要な CSS (クリッピング用)

h1 {
    background: white;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    width: 100%;
    max-width: 960px;
    margin: 5% auto;
}
.backgroundclip h1 span {
    background: url(http://i.imgur.com/TzKl9Kml.jpg) center center no-repeat;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

ループのための重要な jQuery

var terms = ["This", "is", "Hawaii"];
function rotateTerm() {
  var ct = $("h1 > span").data("term") || 0;
  $("h1 > span").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct])
              .fadeIn().delay(600).fadeOut(600, rotateTerm);
}

$(rotateTerm);

元の著者への参照は Fiddle にあります。それらの著者から適応。

于 2013-10-13T09:23:18.587 に答える