Creare un testo trasparente dietro un div

  • Creatore Discussione Creatore Discussione enzo_88
  • Data di inizio Data di inizio

enzo_88

Nuovo Utente
13 Set 2023
4
0
1
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
Immagine.png
 
Ciao, con qualche rapida ricerca ho trovato la stessa richiesta (con la stessa immagine) postata circa un anno fa su stackoverflow

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:
HTML:
<div class="wrap">
  <div class="col col_l">For</div>
  <div class="col col_r">est</div>
</div>
CSS:
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:

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

Prova e fai sapere.
 
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
 

Allegati

  • risultato.png
    risultato.png
    957 KB · Visite: 79
  • html.png
    html.png
    143,4 KB · Visite: 71
  • css.png
    css.png
    270,7 KB · Visite: 70
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.
 
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.
 

Allegati

  • Immagine.png
    Immagine.png
    865,5 KB · Visite: 78
  • css.png
    css.png
    307,6 KB · Visite: 68
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.
 

Discussioni simili