Transparent text cut out of background

Question

Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS?
It would be sad to lose all pr

Answer 1

Although this is possible with CSS, a better approach would be to use an inline SVG with SVG masking. This approach has some advantages over CSS :

• Much better browser support: IE10+, chrome, Firefox, safari...
• This doesn't impact SEO as spiders can crawl SVG content (google indexes SVG content since 2010)

CodePen Demo : SVG text mask

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

If you aim on making the text selectable and searchable, you need to include it outside the tag. The following example shows a way to do that keeping the transparent text with the tag:

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}