HTML/CSS: testo "Visualizza attraverso lo sfondo"?

Question

Ok, è possibile.

Ho un'immagine di sfondo. Per di più, ho una scatola grigia trasparente per il contenuto. Mi piacerebbe avere il titolo in alto nel testo, cioè le lettere che espongono lo sfondo. Quindi, il testo rimuove la casella grigia e lascia trasparire lo sfondo.

L'unico modo hacky che riesco a vedere è creare un'immagine con le lettere trasparenti su uno sfondo dello stesso colore grigio, quindi provare ad allineare in qualche modo quella con la casella grigia.

C'è un altro - meglio?

Answer 1

Un modo è utilizzare -webkit-background-clip: text;: demo here (solo Webkit ovviamente).

Utilizzando posizione, siamo in grado di sincronizzare entrambi gli sfondi:

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

Oppure si potrebbe usare lo stesso approccio e applicare un svg mask, che funzionerà in tutti i browser moderni.