如何在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）