Background and transparent text are cut off

Question

Is there a way to use CSS to create the cutting out transparent text from the background effect as shown below?

It would be a shame to lose all that valuable SEO because images replace text.

I thought of shadows first but I couldn't think of anything...

This picture is the background of the website, absolutely positioned<img>tag

Answer 1

While this can be achieved with CSS, a better approach is to use inline SVG with SVG masks. This approach has some advantages over CSS:

• Better browser support: IE10, chrome, Firefox, safari...
• This does not impact SEO as spiders can crawl SVG content (Google has indexed 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 your goal is to make the text selectable and searchable, you need to include it outside the <defs> tag. The following example shows one way to preserve transparent text using the < using 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%;}

Answer 2

CSS3 can be implemented, but not all browsers support it

With background clip: text; you can use a text background, but it must be aligned with the page background

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

ABCDEFGHIKJ