css - 如何使用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）