如何使用css中的剪辑混合两个图像？答案

【问题标题】：How to mix two image using clipping in css?如何使用css中的剪辑混合两个图像？
【发布时间】：2016-02-05 22:25:56
【问题描述】：

我有两个图片链接。

原图-

蒙版图片 -

这是结果图像。

我怎样才能得到这样的结果？

我正在寻找使用 css 的方法 - clip-path : rect(....) 但我找不到使用图像掩码。

【问题讨论】：

【解决方案1】：

确保蒙版是 .png，其中灰色部分是透明的。然后，按以下方式使用它：

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

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

您可能希望使用一些 CSS 背景属性来对齐原始图像，以便显示正确的部分（请参阅http://www.w3schools.com/cssref/pr_background-position.asp）

【讨论】：