带有透明字母的SVG背景，以查看其他内容

Question

I need to have a video running, and of top of it a black div with opacity less than 1 but with some text transparent to allow the user to see the video behind, and also a button with the same effect.

This is a picture of what I am looking for:

I manage to this in another release by using a png covering the video area, but now I need that button to have the same effect and I though about SVG, but I don't know if it is exactly true that I can use it or how.

Thanks

Answer 1

Here is how I would do it using an SVG image overlaying the background.

 .wrapper { position: relative; } .wrapper svg { position: absolute; left: 0; top: 0; } 

 <div class="wrapper"> <img src="http://lorempixel.com/640/480"/> <svg id="overlay" width="640" height="480" viewBox="0 0 640 480"> <defs> <mask id="mymask"> <rect width="100%" height="100%" fill="white"/> <text x="320" y="140" text-anchor="middle" font-size="40px" >Some transparent text</text> <text x="320" y="190" text-anchor="middle" font-size="40px" >has been placed here</text> <rect x="220" y="300" width="200" height="50" fill="black"/> <text x="320" y="335" text-anchor="middle" fill="white" font-size="30px">BUTTON</text> </mask> </defs> <rect fill="black" fill-opacity="0.7" width="100%" height="100%" mask="url(#mymask)"/> </svg> </div>