时间戳

首页 > 解决方案 > 如何在图像响应式顶部制作文本块？

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

问题描述

我正在使用内联 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%; 在填充之后和标题的 div 样式内，但它仍然不起作用。

非常感谢。

标签： htmlcssinline

解决方案

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

<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>

推荐阅读