在圖像上寫文字作為響應

Question

我想在因子圖像上寫文字，比如這個圖像，文本和圖像是響應的，例如在單價列的第 1 行，我寫價格，然后其他屏幕上的這個圖像在這里，不要改變它的位置

我在這個網站的圖片上寫道： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_text但是當我更改文本位置以設置在您的位置時，它在另一個屏幕中更改位置

Answer 1

你的問題是你沒有響應文本，當你的圖像變小並且字體大小沒有改變導致不正確的 position 時。一切都需要同步。 這是一個示例，您需要計算以使您的內容更准確。

 .invoice { position: relative; }.balance { position: absolute; bottom: 14%; right: 14%; font-size: 2vw; } @media only screen and (max-width: 768px) {.balance { bottom: 14.2%; } } @media only screen and (max-width: 500px) {.balance { bottom: 14.5%; } }

 <div class="invoice"> <img style="width: 100%" src="https://i.stack.imgur.com/odI4u.png" alt=""> <span class="balance">10000</span> </div>