Wie kann man reaktiven Text über einem Bild erstellen?

Question

Ich bin mir wirklich nicht sicher, wie ich diese Frage anders stellen soll, aber ich versuche, Text über ein Bild zu laden - was an sich schon eine knifflige Aufgabe zu sein scheint, aber ich habe es mit this Anleitung. Leider ist das Tutorial etwas veraltet und ich kann keine Möglichkeit finden, sowohl die Schriftgröße als auch die Span-Größe für mobile Geräte dynamisch zu ändern und den Text trotzdem an der richtigen Stelle über dem Bild zu halten.

Wenn das Fenster in der Größe geändert wird, wird der Text und das Feld nicht richtig skaliert (es läuft außerhalb des Bildes über).

Ich habe prozentuelle Größenbestimmung sowie andere Techniken mit wenig Glück versucht. Das CSS, das ich verwende, um den Text über dem Bild mit einem Hintergrund anzuzeigen, kann unten gesehen werden.

Was ist die beste Vorgehensweise beim Überlagern von Text auf einem Bild und wie würde man reagieren? Das ist, was ich versuche jetzt für Desktop-Browser zu verwenden:

.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); 
} 

Hat jemand einen Rat, wie dies in diesen Tagen richtig zu behandeln? Der Artikel, den ich oben erwähne, stammt aus dem Jahr 2009, und ich vermute, dass dies nicht der beste Weg ist, Text zu überlagern.

Answer 1

Hier sind die Änderungen würde ich machen:

• Position der span mit bottom anstatt top, so haben Sie immer eine bestimmte Marge zwischen dem Kalibrier- und dem unteren Rand des Bildes.
• Verwenden Sie ein Prozentbasis line-height, so dass sie proportional zum, etwas Padding rechts von der Spanne hinzufügen font-size
• ändern wird so der Text auf dem Rand der Spanne nicht bis nicht stoßen

Aktualisiert CSS:

.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); 
}