0

jquery を使用して 5 秒ごとに background-image プロパティを設定する一連のクロス フェード背景画像を含む div (div B) の上に z インデックスが付けられた div (div B) で水平方向に実行されるナビゲーション div (div A) があります。ただし、赤いセクションをdivの背景画像の上に「マスク」する必要がありますが、青いセクションは下のdiv（div A）まで透明にする必要があります。マスキング/クリッピングが適用され、どの背景画像が表示されても同じになります。

エンド ユーザーはサイクリングの背景画像として使用する新しい画像をアップロードする可能性があるため、画像エディターを使用して画像を編集してマスキングと透明度を作成することはできません。

これは、HTML 5 のマスキング/クリッピング機能を背景画像に適用するか、div (div B) を含む組み合わせで実現できますか? もしそうなら、マスキング/クリッピングの両方が画像に適用された例を誰かに見せてもらえますか?

そうでない場合、誰かがアップロード前に画像編集以外の別の方法をアドバイスできますか?

レイアウトのサンプル

4

1 に答える 1

0

明確にするために：すべての赤いピクセルを透明にしたいですか？

これを行う方法とデモの説明は次のとおりです。http://jsfiddle.net/m1erickson/2oun9t1x/

  • キャンバスに背景画像を描画します。

  • マスクとして使用したい赤のピクセルのみを含む「マスキング」画像を作成します。

  • 合成を 'destination-out' に設定します。これにより、既存のピクセルが新しい描画と交差する場所で透明になります: context.globalCompositeOperation='destination-out'.

  • 赤い画像を描画して、それらの赤いピクセルと交差する場所でのみ画像を「消去」します。

背景画像 (左) とマスク (右):

ここに画像の説明を入力ここに画像の説明を入力

合成を使用してマスクされた背景画像:

ここに画像の説明を入力

于 2014-08-15T21:18:18.037 に答える