如何在图像上放置文本块？

debugcn 发表于 Dev

扎卡里

我试图在我的HTML网站上的图片上放置文字块。我已经在Internet上搜索了一段时间，幸运的是发现了以下4种方法：

<!--method 1 -->
<div style="position: relative; background: url(hknight.jpg); width: 738px; height: 284px;">
	<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">
		<p>(text to appear at the bottom left of the image)</p>
	</div>

	<p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;"> (text to appear at the top right of the image) </p>
</div>

<!--method 2 -->
<div style="background:url({{site.baseurl}}assets/hknight.jpg) no-repeat;width:738px;height:284px;text-align:center">
	<span style="color:#fcc">some text...</span>
</div>

<!--method 3 -->
<div style="position:relative; width: 738px; height: 284px">
	<span style="position:absolute; left:50; bottom:50; color:#fff; font-weight:bold">some text</span>
	<img src="hknight.jpg">
</div>

<!--method 4 -->
<TABLE BORDER="0" cellpadding="5" CELLSPACING="0">
  <TR>
    <TD WIDTH="738" HEIGHT="284" BACKGROUND="hknight.jpg" VALIGN="bottom">
      <FONT SIZE="+1" COLOR="yellow">some text ...</FONT>
    </TD>
  </TR>
</TABLE>

但是，这四种方法都无法如我所愿地产生理想的效果。您可以参考以下数字。在此处输入图片说明第一种方法可以将文本块准确定位在图像上。但是，图像无法自动适应屏幕。例如，如果我从智能手机访问网页，则仅显示图像的左侧。顺便说一句，您可以看到边框就像一个带有锐角的正方形。第二种方法与第一种方法类似，不同之处在于无法准确放置文本块。在此处输入图片说明第三种方法可将图像自动适应屏幕。边框显示曲线线，看起来非常好。但是我无法准确定位文本。如您所见，在我的代码中，我使用的代码left:50; bottom:50;仅在左上角带有文本框。第四种方法特别适用于table。问题类似于第一种方法，因为它的边界很锐利，无法适应屏幕。更糟糕的是，尽管我指定了truewidth和，但图像仍小于原始大小height。

您能想到满足我要求的更好解决方案吗？

编辑1：
对于方法3，如果我选择em作为位置参数，则现在可以使用！我不知道为什么pixel不在指定位置显示文本。

编辑2：
我的要求：

图像边界线应为曲线。
文本块应按照我的要求准确定位。
图像可以自动适应屏幕。

罗科·C·布尔扬

让图像在已overflow:hidden定位的父对象内垂直流动。
随意放置absolute文本。

.box{
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 10px;
}
.box img{
  width: 100%;
}

.bottom,
.right{
  margin:1em;
  position:absolute;
}
.bottom{
  bottom: 0px;
}
.right{
  right: 0px;
  top: 0px;
}

<div class="box">
  
  <img src="http://images2.layoutsparks.com/1/119132/city-lights-building-night.jpg">
  
  <p class="bottom">(text to appear at the bottom left of the image)</p>
  <p class="right"> (text to appear at the top right of the image)</p>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章