Testo trasparente tagliato fuori di sfondo

C’è un modo per rendere un testo trasparente tagliato da un effetto di fondo come quello nell’immagine seguente, con i CSS?
Sarebbe triste perdere tutti i preziosi SEO a causa delle immagini che sostituiscono il testo.

Testo trasparente tagliato fuori di sfondo

Ho pensato prima alle ombre ma non riesco a capire niente …

L’immagine è lo sfondo del sito, un tag posizionato in modo assoluto

È ansible con css3 ma non è supportato in tutti i browser

Con sfondo-clip: testo; puoi usare uno sfondo per il testo, ma dovrai allinearlo con lo sfondo della pagina

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

ABCDEFGHIKJ

Sebbene ciò sia ansible con i CSS, un approccio migliore sarebbe utilizzare un SVG in linea con mascheramento SVG . Questo approccio ha alcuni vantaggi rispetto al CSS:

  • Supporto browser molto migliore : IE10 +, chrome, Firefox, safari …
  • Questo non ha alcun impatto sulla SEO in quanto gli spider possono eseguire la scansione del contenuto SVG ( indice google indicizza il contenuto SVG dal 2010 )

Demo CodePen: maschera di testo SVG

sfondo trasparente di ritaglio del testo

 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 Text mask     

Un modo che funziona sulla maggior parte dei browser moderni (ad eccezione, ad esempio, bordo), anche se solo con uno sfondo nero, è quello di utilizzare

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

nel tuo elemento di testo e poi metti quello che vuoi dietro. Moltiplica fondamentalmente il codice di colore 0-255 su 0-1 e quindi moltiplica quello che è dietro, così il nero rimane in bianco e nero moltiplica di 1 e diventa effettivamente trasparente. http://codepen.io/nic_klaassen/full/adKqWX/

È ansible, ma finora solo con i browser basati su Webkit (Chrome, Safari, Rockmelt, qualsiasi cosa basata sul progetto Chromium.)

Il trucco è di avere un elemento all’interno di uno bianco con lo stesso sfondo del corpo, quindi usare -webkit- background-clip: text; sull’elemento interno che in pratica significa “non estendere lo sfondo oltre il testo” e utilizzare testo trasparente.

 section { background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg); width: 100%; height: 300px; } div { background: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 0); width: 60%; heighT: 80%; margin: 0 auto; font-size: 60px; text-align: center; } p { background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg); -webkit-background-clip: text; }​ 

http://jsfiddle.net/BWRsA/

Immagino che potresti ottenere qualcosa del genere usando la background-clip , ma non l’ho ancora provato.

Vedi questo esempio:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(Solo per Webkit, non so ancora come cambiare lo sfondo nero con uno bianco)

Puoi utilizzare un carattere invertito / negativo / inverso e applicarlo con la regola CSS di font-face="…" . Potrebbe essere necessario giocare con la spaziatura delle lettere per evitare piccoli spazi bianchi tra le lettere.

Se non hai bisogno di un font specifico, è semplice. Scarica un simpatico, ad esempio da questa raccolta di caratteri invertiti .

Se hai bisogno di un font specifico (ad esempio “Open Sans”), è difficile. Devi convertire il tuo font esistente in una versione invertita. Questo è ansible manualmente con Font Creator, FontForge ecc., Ma ovviamente vogliamo una soluzione automatizzata. Non sono ancora riuscito a trovare istruzioni per questo, ma alcuni suggerimenti:

  • Come convertire un font bitmap in un font TrueType (più un altro modo per farlo). Per prima cosa utilizzare i comandi di ImageMagick per rendere i glifi dei font in immagini raster ad alta risoluzione e invertire, quindi convertirli in un font TrueType con le istruzioni di cui sopra.
  • È ansible invertire un font con FontForge o un altro PGM?
  • Creazione di un font inverso (bianco su nero)

È ansible utilizzare il plug-in jQuery Patternesh di myadzel per ottenere questo effetto tra i browser. Al momento, non esiste un modo cross-browser per farlo con solo CSS.

Si usa Patternizer aggiungendo class="background-clip" agli elementi HTML in cui si desidera che il testo sia dipinto come un pattern di immagine e si specifica l’immagine in un attributo data-pattern="…" aggiuntivo. Guarda la fonte della demo . Patternizer creerà un’immagine SVG con testo pieno di pattern e lo sottoporrà all’elemento HTML reso trasparente.

Se, come nell’immagine di esempio della domanda, il modello di riempimento del testo dovrebbe essere una parte di un’immagine di sfondo che si estende oltre l’elemento “modellato”, vedo due opzioni (non testate, la mia preferita prima):

  • Usa mascheramento invece di un’immagine di sfondo in SVG. Come nella risposta di web-tiki , a cui l’uso di Patternizer aggiungerà ancora la generazione automatica dell’SVG e un elemento HTML invisibile in cima che consente la selezione e la copia del testo.
  • Oppure utilizzare l’allineamento automatico dell’immagine del modello. Può essere fatto con un codice JavaScript simile a quello nella risposta di Gijs .

Screenshot Demo

Avevo bisogno di creare un testo che assomigliasse esattamente a quello del post originale, ma non potevo semplicemente fingere mettendo in fila gli sfondi, perché c’è qualche animazione dietro l’elemento. Nessuno sembra averlo ancora suggerito, quindi ecco cosa ho fatto: (Ho cercato di renderlo il più facile da leggere ansible).

 var el = document.body; //Parent Element. Text is centered inside. var mainText = "THIS IS THE FIRST LINE"; //Header Text. var subText = "THIS TEXT HAS A KNOCKOUT EFFECT"; //Knockout Text. var fontF = "Roboto, Arial"; //Font to use. var mSize = 42; //Text size. //Centered text display: var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox), ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff"; ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400; //Generate subtext SVG for knockout effect: txtSub.innerHTML = ""+ ""+ ""+ ""+ ""+subText+""+ ""+ ""; //Relevant Helper Functions: function centeredDiv(parent) { //Container: var d = document.createElement('div'), s = d.style; s.display = "table"; s.position = "relative"; s.zIndex = 999; s.top = s.left = 0; s.width = s.height = "100%"; //Content Box: var k = document.createElement('div'), j = k.style; j.display = "table-cell"; j.verticalAlign = "middle"; j.textAlign = "center"; d.appendChild(k); parent.appendChild(d); return k; } function mkDiv(parent, tCont) { var d = document.createElement('div'); if(tCont) d.textContent = tCont; parent.appendChild(d); return d; } function textWidth(text, font, size) { var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")), context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font; return context.measureText(text).width; } 

Buttalo nella tua finestra. Scarica, imposta lo sfondo del corpo sulla tua immagine e osserva la magia che si verifica!

Non è ansible con i CSS, ora ho paura.

La soluzione migliore è semplicemente usare un’immagine (probabilmente un file PNG) e posizionare un buon testo di alt / titolo su di essa.

In alternativa puoi usare uno SPAN o un DIV e avere l’immagine come sfondo per quello con il testo che vuoi per scopi di SEO al suo interno, ma testo rientarlo fuori dallo schermo.

metti quel css

  .banner-sale-1 .title-box .title-overlay { font-weight: 900; overflow: hidden; margin: 0; padding-right: 10%; padding-left: 10%; text-transform: uppercase; color: #080404; background-color: rgba(255, 255, 255, .85); /* that css is the main think (mix-blend-mode: lighten;)*/ mix-blend-mode: lighten; } 

Ho appena scoperto un nuovo modo di fare questo mentre mi caccio in giro, non sono del tutto sicuro di come funzioni (se qualcun altro vuole spiegare, per favore fallo).

Sembra funzionare molto bene e non richiede sfondi doppi o JavaScript.

Ecco il codice: JSFIDDLE

 body { padding: 0; margin: 0; } div { background: url(http://www.color-hex.com/palettes/26323.png) repeat; width: 100vw; height: 100vh; } body::before { content: '$ALPHABET'; left: 0; top: 0; position: absolute; color: #222; background-color: #fff; padding: 1rem; font-family: Arial; z-index: 1; mix-blend-mode: screen; font-weight: 800; font-size: 3rem; letter-spacing: 1rem; }