У меня есть ссылка на два изображения.Как смешивать два изображения с помощью обрезки в css?
Исходное изображение -
Маскировка изображения -
Вот результат изображения.
Как я могу получить результат, как это?
Я нашел способ использовать css - clip-path : rect(....), но я не могу найти с использованием маски для изображений.
Убедитесь, что маска является .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)
WOW! Это хорошая идея – coolwine
Вы просто хотите использовать обрезку? Как насчет следующего упрощенного подхода CSS, чтобы заключить изображение в контейнер круглой формы? 'border-radius: 50% и overflow: hidden;' –
Спасибо за ваш совет. Но есть много другой формы. Поэтому я найду другой способ получить ответ. – coolwine