Как сделать фильтр рваных краев в изображении через CSS?

Question

[Михаил Руденко]

Есть вот такое изображение.Нужно его не так вырезать как оно есть рваное , а сделать изображение через фильтр с рваными краями,может через свг,если кто делал уже такое помогите.

Answer 1

[Денис Инешин]

По скольку фон сайта однородный белый, то проще всего это сделать прозрачной маской поверх фото.
Т.е. использовать прозрачный png без всяких CSS эффектов.

Например

Comments

[Михаил Руденко]

Мне сказал тимлид,что это лучше сделать через фильтра,но не сказал какие,ищу и интернете не могу найти,маска пнг не подойдет,таких картинок может быть много и разных размеров,да и вот к примеру блок белый на картинки тоже через фильтра сделать, а не вырезать в макете белый блок пнг,есть ли какая альтернатива?

[Денис Инешин]

Даже для разных размеров можно сделать, только элемент будет чуть сложнее, нужно будет с каждого края такую текстуру сделать и позиционировать поверх картинки.

[Денис Инешин]

Михаил Руденко: ну если совсем прет, то попробуйте SVG фильтр, но с ним вы запаритесь: stackoverflow.com/questions/27686522/generating-ra...