Ho uno sfondo piacevole sulla mia pagina, e voglio che l'intestazione del testo agisca come una maschera per tagliare il suo div contenente e avere lo sfondo come una trama. Posso farlo in CSS o devo aprire Photoshop?CSS: Posso usare il testo come maschera in modo che l'immagine di sfondo mostri solo all'interno del testo?
supporto del browser limitato, ma background-clip si può ottenere questo effetto: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (Hit i tasti Animate per più divertente)
Uso SVG si può fare in questo modo: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (Visualizza sorgente per vedere ciò che è effettivamente fatto, vedi reference article troppo)
Utilizzando un'immagine di sfondo e poi CSS, si potrebbe fare questo: http://www.netmagazine.com/tutorials/texturise-web-type-css
C'è una proprietà background-clip: text in CSS3, anche se non funziona in tutti i browser. Vedi here per maggiori dettagli.
come CSS-Tricks mostra in questo article, 'immagine dietro il testo' può essere fatto in quanto tale:
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url(images/fire.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Ma non è garantito il funzionamento su tutti i browser, in modo da suggerire alcune arounds di lavoro , come modernizr.
Ecco come si presenta quando funziona:
potrebbe essere necessario aprire Photoshop solo per mostrarci quello che il risultato finale ha bisogno di guardare come :) –