Texto transparente recortado del fondo.

¿Hay alguna manera de hacer un texto transparente recortado de un efecto de fondo como el de la siguiente imagen, con CSS?
Sería triste perder todo el valioso SEO debido a que las imágenes reemplazan al texto.

Primero pensé en las sombras pero no puedo entender nada...

<img>La imagen es el fondo del sitio, una etiqueta de posición absoluta.

Dec 18 '12 19:12 Love Dager

Aunque esto es posible con CSS, un mejor enfoque sería utilizar un SVG en línea con máscara SVG . Este enfoque tiene algunas ventajas sobre CSS:

Soporte de navegador mucho mejor : IE10+, Chrome, Firefox, Safari...
Esto no afecta el SEO ya que las arañas pueden rastrear contenido SVG ( Google indexa el contenido SVG desde 2010 ).

Demostración de CodePen: máscara de texto SVG

fondo de recorte de texto transparente

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>

Expandir fragmento

Si su objetivo es que el texto sea seleccionable y buscable, debe incluirlo fuera de la <defs>etiqueta. El siguiente ejemplo muestra una manera de hacerlo manteniendo el texto transparente con la <use>etiqueta:

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>

Expandir fragmento

Apr 20 '2015 12:04 web-tiki

Es posible con css3 pero no es compatible con todos los navegadores.

Con clip de fondo: texto; Puedes usar un fondo para el texto, pero tendrás que alinearlo con el fondo de la página.

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>

Expandir fragmento

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

Alineación automática

Con un poco de javascript puedes alinear el fondo automáticamente:

$(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>

Expandir fragmento

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

Dec 18 '2012 12:12 Gijs

Hay una manera sencilla de hacer esto solo con CSS:

background: black;
color: white;
mix-blend-mode: multiply;

para texto transparente sobre fondo negro, o

background: white;
color: black;
mix-blend-mode: screen;

para texto transparente sobre fondo blanco.

Coloque estos estilos en su elemento de texto con el fondo que desee detrás.

Ejemplo de lápiz de código captura de pantalla de ejemplo

Lea y mix-blend-modeexperimente con él para usar diferentes colores.

Advertencias:

Para que esto funcione en Chrome, también debes establecer explícitamente un color de fondo en el htmlelemento.
Esto funciona básicamente en todos los navegadores modernos excepto IE .

Jan 30 '2016 22:01 Nic