如何在图像上定位文本块？

Question

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

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

但是这四种方法都没有产生我想要的效果。你可以参考下面的数字。 第一种方法可以在文本上准确定位文本块。但是，图像无法自动适应屏幕。例如，如果我从智能手机访问网页，则只显示图像的左侧部分。顺便说一下，你可以看到边框就像一个尖角的正方形。 第二种方法类似于第一种方法，只是文本块不能准确放置。 第3种方法自动调整图像到屏幕。边框显示曲线，看起来非常好。但我无法准确定位文本。如您所见，在我的代码中，我使用了left:50; bottom:50;，它只在左上角出现了文本块。 第4种方法特别适用于table。问题类似于第一种方法，因为它的边界很清晰，不能适应屏幕。更糟糕的是，尽管我指定了真实的width和height，但图片仍小于原始尺寸。

你能想到一个更好的解决方案来满足我的要求吗？

---

编辑1 ：
对于方法3，如果我选择em作为位置参数，它现在可以正常工作！我不知道为什么pixel不会在指定位置显示文字。

编辑2 ：
我的要求：

1. 图像边框线应为曲线。
2. 文本块应该按照我的意愿准确定位。
3. 图像可以自动适应屏幕。

Answer 1

让图像在overflow:hidden定位的父级内垂直流动 将absolute文本放在愿望位置。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;