如何在圖像上創建響應式文本？

Question

我真的不知道如何以任何其他方式提出這個問題，但我試圖加載圖像的頂部的文本 - 這本身似乎是一個棘手的任務，但我已經得到它使用this教程。不幸的是，本教程略有過時，我無法找到一種方法來動態更改移動設備的字體大小和跨度大小，並將文本保持在圖像頂部的正確位置。

窗口大小調整後，文本和框不能正確調整大小（溢出圖像外）。

我已經試過百分比大小以及其他技巧與小運氣。下面可以看到我用CSS在背景圖片上顯示文字的CSS。

將圖像疊加在圖像上的最佳做法是什麼，以及如何讓它響應？這就是我想現在用於桌面瀏覽器：

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

有沒有人對如何妥善處理這這幾天一些建議嗎？我上面提到的文章是從2009年開始的，我懷疑這不是重疊文本的最佳方式。

Answer 1

這裏是改變我會做：

• 位置span使用bottom而非top，所以你總是有跨度和圖像的底部之間的特定餘量。
• 使用基於百分比line-height，這樣它會按比例更改爲font-size
• 一些填充添加到跨度的權利，所以文本不會碰直到上跨度的邊緣

更新的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); 
}