css - cssでクリッピングを使用して2つの画像を混在させる方法は?

Question

2つの画像リンクがあります。

元の画像 -

マスキング画像 -

結果画像はこちら。

どうすればこのような結果を得ることができますか?

css を使用して何らかの方法をclip-path : rect(....)見つけていましたが、イメージ マスクを使用して見つけることができません。

Answer 1

マスクが灰色の部分が透明な .png であることを確認してください。次に、次の方法で使用します。

CSS:img{background-image: url('original_image');}

HTML:<img src="mask.png"/>

ここで例を参照してください: http://codepen.io/anon/pen/pjOwpe

元の画像の正しい部分が表示されるように、CSS の背景プロパティを使用して元の画像を整列させることができます ( http://www.w3schools.com/cssref/pr_background-position.aspを参照) 。