Is there a (CSS) filter to cut out the outlines of an image on top of another image?

Question

I've got two images on top of my webpages. One is a rectangle-shaped JPG file banner, the other is a wave-shaped SVG vector file. Similar to how Adobe Illustrator has its pathfinder tool to cutout shapes: Is there any way to invert-cutout the wave from the banner, using any sort of CSS filter or blend mode or something?

The reason I want to do this using CSS is because it would only require me to change one HTML template for the banner. Otherwise I would have to edit 125+ unique banner image files. Editing the wave file is not a problem if needed, as I would only need it once for the banner template.

Example banner:

Example wave:

Desired result: (the banner should look like this)

Check [`mask-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image) — Hao Wu, Sep 04 '21 at 08:04
Ahh, I knew something like this existed somewhere. Many thanks! — Al John, Sep 04 '21 at 08:13

score -1 · Accepted Answer · answered Sep 04 '21 at 08:17

-1

I think you can use clip-path
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

answered Sep 04 '21 at 08:17

Damien STEPHAN

113
1
9

Is there a (CSS) filter to cut out the outlines of an image on top of another image?

1 Answers1