Как смешать два изображения с помощью отсечения в 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).