如何在响应图像顶部制作文本块？

Question

我正在使用内联 CSS（CMS 不支持非内联的 CSS）对我的个人网站进行编码，并且我正在努力使我的设计在移动设备上响应。

它在 iPad 和桌面上看起来不错，但在移动设备上看起来很糟糕，因为它超出了网站本身的宽度。

这是它在桌面上的样子

这是我目前正在使用的代码：

<div style="position:relative;font-family:Lato;" >

<img src="https://images.unsplash.com/photo-1589503099580-00dc088a0081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="Nature" style="width: 100%">

<div class="text-block" style="position:absolute;top:150px;right:90px;left:650px;background-color:white;color:black;padding-top:10px;padding-bottom:20px;padding-left:20px;padding-right:20px;width:100%;" >

<h2><div style="font-size: 45px; line-height: 76px;"><font color="#f56b00"><b>Lorem Ipsum</b></font></div></h2>

<div style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>
</div>

我希望通过在底部或图像内放置文本框来实现移动响应。 我试过添加 width:100%; 在填充之后和 header 的 div 样式中，但它仍然不起作用。

非常感谢你。

Answer 1

这是如何实现这一目标的建议。

 <div style="position: relative; font-family: Lato;"> <img src="https://images.unsplash.com/photo-1589503099580-00dc088a0081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="Nature" style="width: 100%; height: 60%" /> <div class="text-block" style=" position: absolute; background-color: white; color: black; padding: 10px 20px 20px 20px; width: 45%; top: 40%; left:60%; transform: translate(-50%, -50%); "> <h2> <div style="font-size: 45px; line-height: 76px;"> <font color="#f56b00"><b>Lorem Ipsum</b></font> </div> </h2> <div style="font-size: 16px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div>