Direi che hai mischiato un po' di metodi.
Lasciando perdere mix-blend-mode, se l'intento è quello di dare un diverso colore ad una parte del testo, puoi certamente usare la proprietà background-clip:text, applicandola però con criterio.
Tieni infatti conto che tale proprietà non fa altro che "ritagliare" lo sfondo usando il testo come maschera.
Se il testo ha un suo proprio colore opaco (come nel tuo esempio) non vedrai alcun effetto, perché il testo stesso copre lo sfondo che gli sta sotto (il quale segue esattamente la stessa sagoma del testo).
Per poter apprezzare l'effetto dovrai impostare il testo con il colore "transparent".
A questo punto potresti applicare lo sfondo con una interpolazione lineare che va dal nero al bianco, con un passaggio netto nel punto in cui inizia l'immagine sottostante.
Una cosa del genere:
codice:
.title {
position: absolute;
top: 0;
left: 0;
z-index: 1;
color: transparent;
background: text linear-gradient(to right, #000, #000 150px, #fff 150px);
}
Ho usato la forma contratta per la proprietà background.
codice:
background: text linear-gradient(to right, #000, #000 150px, #fff 150px);
Questo equivale a scrivere per esteso le relative sotto-proprietà:
codice:
background-clip: text;
background-image: linear-gradient(to right, #000, #000 150px, #fff 150px);
Nota che ho usato la funzione linear-gradient per creare una immagine di sfondo che va appunto dal nero al bianco.
Tieni inoltre conto che non c'è nulla di "automatico"; il valore 150px (che delimita il passaggio da nero a bianco) corrisponde (e deve corrispondere) al valore che hai impostato per la proprietà left dell'elemento .photo in modo che il testo cambi colore esattamente in quel punto.
Certamente il contenuto testuale o l'immagine possono variare senza problemi, per cui otterrai comunque lo stesso effetto, ma la loro posizione non dovrà essere variata (cioè, dovrà essere decisa a priori in modo da impostare opportunamente l'effetto). Analogamente, la larghezza del testo non dovrebbe superare il limite destro dell'immagine, perché quella parte di testo è di colore bianco a prescindere che si trovi sopra l'immagine o meno.
Vedi se può andare.
Buon proseguimento 
Rispondi quotando
