divを画像の境界線に合わせる

このように2つの画像の間に「トランジション」を作成することができるかどうか質問したいと思いました。 css/javascriptを使用していますか？divを画像の境界線に合わせる

トップにあるのは、そのコンテンツと背景画像（砂/水）を持つdivで、その「波」を使って分割する必要がある、底部に（他のコンテンツと背景画像とともに）（これは.pngファイルです）。

私がしようとしたことは、明らかにうまくいかなかったボーダー画像として「波」を使用することでした。私はおそらくhttp://bennettfeely.com/clippy/のようなツールを使用してトップとボトムのdivの両方のシェイプを作成する必要があることを知っていましたが、それは時間がかかり、応答しない可能性があります。

ありがとうございます。

出典

2017-01-24 Macjej

はい、可能です。 multiple background stackingを使用するだけです。

それはそれ以下のビーチを表示することができますので、波のPNGファイルは、その半透明性を持っている必要があります

background: url('images/wave.png') no-repeat center, url('images/beach.jpg') no-repeat center center/cover;

。

EDIT： OPの質問の目的は、それが唯一の波の面積を取ることができるように画像をクリッピングすることです。それはclip-pathの使用によって達成可能です。この詳細については、CSS Tricks.

出典

2017-01-24 10:06:45 snkv

でご覧ください。再生に感謝します。しかし、私は私の問題を正しく説明したとは思わない。あなたが作品を見せて、しかし、私は何とか底やトップのdivの背景を制限するために '波'が必要です。あなたが私の質問で見ることができるように、波がある限り、バックグラウンドは拡大されます。 – Macjej

@Macjej、物事を行う 'クリップパス'の方法は、一部のブラウザだけで部分的にサポートされていますが、これは今のところ良い習慣ではありません。あなたのスクリーンショットで判断すると、主なビーチコンテナに波のイメージを広げる必要があります。 – snkv

おそらく最も良い方法は、gimpや何かの波の上または下の背景を組み合わせることです。さて、お時間をありがとう！ – Macjej

divを画像の境界線に合わせる

答えて

関連する問題