Jak utworzyć responsywny tekst na górze obrazu?

Question

Naprawdę nie jestem pewien, jak zadać to pytanie w jakikolwiek inny sposób, ale próbuję załadować tekst na obraz - co wydaje się być trudnym zadaniem samo w sobie, ale mam to zamiar używać this seminarium. Niestety samouczek jest nieco nieaktualny i nie mogę znaleźć sposobu na dynamiczną zmianę rozmiaru czcionki i rozmiaru span na telefon komórkowy i nadal utrzymuję tekst w odpowiednim miejscu na górze obrazu.

Po zmianie wielkości okna tekst i pole nie zmieniają się prawidłowo (przepełnia się poza obrazem).

Próbowałem procentowej wielkości, a także innych technik przy odrobinie szczęścia. CSS, którego używam do wyświetlania tekstu na obrazku z tłem, można zobaczyć poniżej.

Jaka jest najlepsza praktyka polegająca na nakładaniu tekstu na obraz i jak można go dostosować? To właśnie staram się używać do przeglądarek desktopowych teraz:

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

Czy ktoś ma jakieś informacje o tym jak obsługiwać to właściwie te dni? Wspomniany wyżej artykuł pochodzi z 2009 roku i podejrzewam, że nie jest to najlepszy sposób na nakładanie tekstu.

Answer 1

Oto zmiany chciałbym zrobić:

• Ustaw span użyciu bottom zamiast top, więc zawsze masz konkretny margines między przęsła i dolnej części obrazu.
• Użyj procent oparte line-height tak, że zmieni się proporcjonalnie do font-size
• Dodaj pewne dopełnienie po prawej stronie przęsła, więc tekst nie wpadać prosto na krawędzi przęsła

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