HTML/CSS: texto "Ver a través del fondo"

Question

Ok, es esto posible.

Tengo una imagen de fondo. Además de eso, tengo una caja gris transparente para el contenido. Me gustaría tener el título en la parte superior en el texto, que es básicamente las letras exponiendo el fondo. Entonces, el texto elimina el cuadro gris y deja que se vea el fondo.

La única forma de hacky que puedo ver es crear una imagen con las letras transparentes sobre un fondo del mismo color gris, y luego intentar de alguna manera alinear eso con el cuadro gris.

¿Hay alguna otra forma mejor?

Answer 1

Una forma es usar -webkit-background-clip: text;: demo here (webkit solo obviamente).

Usando posición, podemos sincronizar los dos fondos:

#container, #container h1 { 
    background: url(bg.png) 
} 

#container { 
    position: relative; 
} 

#container #gray { 
    background: rgba(0,0,0,.8); 
    padding-top: 8em; 
} 

#container h1 { 
    font-size: 8em; 
    padding-top: /* padding + border of div */; 
    position: absolute; 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
}​ 

O usted podría utilizar el mismo enfoque y aplicar una svg mask, que funcionará en todos los navegadores modernos.