如何在css中使用剪裁來混合兩個圖像？

Question

我有兩個圖像鏈接。

原圖 -

掩蔽圖像 -

下面是結果圖像。

我怎樣才能得到這樣的結果呢？

我找到了一些方法使用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）