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 precious SEO because of images replacing text.

I first thought of shadows but I can't figure anything out...

The image is the site background, an absolute positioned <img> tag

Answer 1

It's possible with css3 but it's not supported in all browsers

With background-clip: text; you can use a background for the text, but you will have to align it with the background of the page

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; }

<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1337/

---

Automatic Alignment

With a little javascript you can align the background automatically:

$(document).ready(function(){   //Position of the header in the webpage   var position = $("h1").position();   var padding = 10; //Padding set to the header   var left = position.left + padding;   var top = position.top + padding;   $("h1").find("span").css("background-position","-"+left+"px -"+top+"px");  });

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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1><span>ABCDEFGHIKJ</span></h1>

​

http://jsfiddle.net/JGPuZ/1336/

Answer 2

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%;}

<svg viewbox="0 0 100 60">    <defs>      <mask id="mask" x="0" y="0" width="100" height="50">        <rect x="0" y="0" width="100" height="40" fill="#fff"/>        <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>        <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>      </mask>    </defs>    <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>      </svg>

If you aim on making the text selectable and searchable, you need to include it outside the <defs> tag. The following example shows a way to do that keeping the transparent text with the <use> 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%;}

<svg viewbox="0 0 100 60">    <defs>      <g id="text">        <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>        <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>      </g>      <mask id="mask" x="0" y="0" width="100" height="50">        <rect x="0" y="0" width="100" height="40" fill="#fff"/>        <use xlink:href="#text" />      </mask>    </defs>    <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>    <use xlink:href="#text" mask="url(#mask)" />  </svg>