Come creare un testo reattivo su un'immagine?

Question

Non sono davvero sicuro di come porre questa domanda in un altro modo, ma sto cercando di caricare del testo sopra un'immagine - che sembra essere un compito difficile in sé, ma ho intenzione di usare this tutorial. Sfortunatamente, il tutorial è leggermente aggiornato e non riesco a trovare un modo per modificare dinamicamente sia la dimensione del font che la dimensione di span per i dispositivi mobili e mantenere comunque il testo nella posizione corretta sopra l'immagine.

Quando la finestra viene ridimensionata, il testo e la casella non vengono ridimensionati correttamente (fuoriescono dall'immagine).

Ho provato il dimensionamento della percentuale e altre tecniche con poca fortuna. Di seguito è riportato il codice CSS che sto utilizzando per visualizzare il testo sull'immagine con uno sfondo.

Qual è la procedura migliore per sovrapporre il testo su un'immagine e come si fa a renderlo reattivo? Questo è quello che sto cercando di usare per browser desktop in questo momento:

.herotext span { 
    position:  absolute; 
    top:   80%; 
    font-family: 'museo_slab500'; 
    font-size: 150%; 
    color:  #fff; 
    padding-left: 20px; 
    width:  40%; 
    line-height: 35px; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
} 

Qualcuno ha qualche consiglio su come gestire correttamente questo in questi giorni? L'articolo che ho menzionato sopra è del 2009 e sospetto che non sia il modo migliore per sovrapporre il testo.

Answer 1

Ecco le modifiche che vorrei fare:

• Posizionare il span utilizzando bottom piuttosto che top, in modo da avere sempre un margine specifico tra la calibrazione e la parte inferiore dell'immagine.
• Utilizzare una percentuale basata line-height modo che cambierà in modo proporzionale alla font-size
• Aggiungete un po 'padding alla destra della campata, in modo che il testo non urtare proprio sul bordo della campata

CSS aggiornamento:

.herotext span { 
    position: absolute; 
    bottom:  20px; 
    font-family: 'museo_slab500'; 
    font-size: 150%; 
    color:  #fff; 
    padding:  0 20px; 
    width:  40%; 
    line-height: 150%; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
}