Come posso fermare lo sfondo trasparente del testo multilinea che si sovrappone tra le righe?

Sto affrontando un problema in cui ho un linea contenente testo multilinea, con uno sfondo trasparente. Nonostante abbia un’altezza di riga predefinita, lo sfondo sul testo si sovrappone, causando righe orizzontali più scure dove lo sfondo è sovrapposto a se stesso.

Ecco una buona dimostrazione del problema (image + jsfiddle)

inserisci la descrizione dell'immagine qui

JsFiddle dimostrando questo problema.

Riproduzione minimale del problema

HTML:

 

Although it is set to a line height of 1, the background behind text still overlaps between rows.

CSS:

     h1 { text-transform: uppercase; font-family: Arial; line-height: 1; font-size: 30px; background: rgba(0,0,0,0.5); color: #FFF; display: inline; } h1 span { position: relative; } 

    Requisiti della soluzione

    1. Il colore di sfondo deve essere conforms alla forma del testo; quindi impostando lo span da display:inline-block non è una soluzione praticabile.
    2. L’impostazione line-height fissa (o padding ) non è una risposta ottimale poiché il rendering esatto dei caratteri cambia tra i browser e le impostazioni dell’utente. Ad esempio, impostare perfettamente l’ line-height della line-height in Chrome produrrà un risultato imperfetto in Firefox.
    3. Il testo deve essere dinamico e semantico. Una soluzione non può implicare il rendering di una rappresentazione dell’immagine del testo sul server per il client.
    4. Preferibilmente, è ansible aggiungere o rimuovere un padding arbitrario per ridurre o aumentare lo spazio tra il testo e il bordo dello sfondo.
    5. Javascript potrebbe andare bene. Sto usando Angular 2 qui, quindi le risposte che si integrano bene con quelle sono ancora migliori.

    L’altezza della linea accetta un valore “none”, quindi puoi impostarlo e funziona (se è display: block), tuttavia (almeno in chrome, safari e ff su Mac) qualsiasi elemento in linea ha una differenza di 1px tra le righe. Quindi nella soluzione qui sotto ho appena aggiunto un padding superiore di 1px alla span per adattarlo alla distanza. Sono un po ‘hacky, ma ha fatto il lavoro. Dovrai fare molto più test del browser, ovviamente. Scala abbastanza bene con lo zoom del browser su chrome e ff, ma ottiene un po ‘di zoom a grandi ingrandimenti in safari.

     h1 { text-transform: uppercase; font-family: Arial; line-height: none; font-size: 30px; color: #FFF; } h1 span { background: rgba(0,0,0,0.5); line-height: inherit; display: inline; padding-top: 1px; } 
     

    Although it is set to a line height of 1, the background behind text still overlaps between rows.