Creare un testo trasparente dietro un div

[enzo_88]

Salve a tutti ragazzi. Sono due giorni che provo a ricreare questo testo trasparente dietro un divi con opacità. qualcuno mi può aiutare? grazie in anticipo

 

[WmbertSea]

Ciao, con qualche rapida ricerca ho trovato la stessa richiesta (con la stessa immagine) postata circa un anno fa su stackoverflow

CSS: How to cut out text on a blurred background?

i wanted to recreate the following style I came up with the following The problem is that the cut does not effect the blur filter and i have no idea how to solve it. This is my HTML code: .gl...

stackoverflow.com

Attualmente c'è una risposta in cui è data una soluzione usando la proprietà css mask. Viene però specificato che funziona solo su chrome.

In effetti ho provato su firefox e non funziona (anche adeguando il css proposto), sebbene tale proprietà sia comunque supportata attualmente.

Dopo aver cercato altre soluzioni ho provato ad elaborare qualcosa usando background-clip (per creare il testo ritagliato) e backdrop-filter (per l'effetto sfocatura).
Abbinare i due effetti non è stato così semplice per via dei diversi comportamenti tra i vari browser.

In qualche modo sono riuscito a far tornare le cose usando un bel po' di css.
Qui una soluzione:

<div class="wrap">
  <div class="col col_l">For</div>
  <div class="col col_r">est</div>
</div>

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.wrap {
  position: relative;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  font: 900 120pt 'Arial Black', Gadget, sans-serif;
  color: transparent;
  background: #0a2925 url(https://picsum.photos/id/353/1024/768) no-repeat center ;
  background-size: cover;
}
.wrap::before {
  content: '';
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #fff3;
  backdrop-filter: blur(10px);
}
.col {
  display: flex;
  position: absolute;
  z-index: 1;
  align-items: center;
  height: 100%;
}
.col_l {
  box-sizing: border-box;
  justify-content: end;
  text-align: right;
  width: 100%;
  padding-right: 50%;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}
.col_r {
  top: 0;
  right: 0;
  width: 50%;
  color: #fff;
}

Qui l'esempio su codepen:

https://codepen.io/OpenDec/pen/yLGXrVB

Testato su chrome (v117) e firefox (v112).

Prova e fai sapere.

 

[enzo_88]

Grazie mille per la risposta così dettagliata. ho provato a cambiare il design e mi da questo problema. la linea degli alberi non segue quella dello sfondo

 

[WmbertSea]

Sì, è necessario che il contenitore principale e l'elemento in cui c'è il testo (nel mio esempio: wrap e col_l ) abbiano stesse dimensioni e posizione, perché entrambi, in modo specifico, hanno lo stesso background che deve chiaramente coincidere.

Questo è un vincolo dovuto al diverso comportamento tra browser, nello specifico chrome. La storia è lunga.

A grandi linee, inizialmente avevo infatti provato a sfruttare un solo background, cioè applicandolo solo al contenitore principale. In tal caso l'elemento col testo, applicando background-clip, riceve il background "originale" del contenitore.

Però sorge un problema nel momento in cui inserisco l'elemento per creare l'effetto sfocato sotto il testo.

A quel punto con firefox ho ottenuto il risultato atteso, cioè il background originale viene mantenuto dentro il testo, invece ho riscontrato che chrome applica il background-clip dopo l'elaborazione di tutto ciò che sta sotto l'elemento testo. Per cui, sì, mi dava il testo ritagliato con lo sfondo, ma questo risultava sfocato, rendendo quindi il risultato inconcludente.

A tale proposito ho effettuato altre prove, per cui sono arrivato alla conclusione che sia necessario applicare uno stesso sfondo per l'elemento testo (vedi il "background: inherit") e che questo deve chiaramente avere la stessa dimensione e posizione del genitore, in modo che l'immagine di sfondo coincida.

Tenendo conto di questo, il tuo ".text" deve avere width ed height al 100%. Potrai eventualmente posizionare il testo, dentro l'elemento, usando altre proprietà che non incidano sulla dimensione e posizione proprie del relativo elemento.

Prova e fai sapere se riesci a correggere.

 

[enzo_88]

Ho fatto un'ulteriore prova.
Come descritto ho impostato l'altezza e larghezza al 100% per l'allineamento dell'immagine nel testo. Dopo aver fatto ciò il testo ha perso l'allineamento verticale e orizzontale, così ho inserito un display flex per allineare il tutto.
Il risultato è sorprendente.
Grazie di cuore.

 

[WmbertSea]

Perfetto
Ottima scelta anche per l'allineamento, flexbox si presta bene.


PS: per postare del codice, se relativamente poco, meglio usare gli appositi tag (vedi "Più opzioni... > Codice" tra gli strumenti dell'editor messaggi) piuttosto che allegarlo come immagine, Questo può risultare importante per il seo e per le ricerche nel forum.