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

Question

我试图在我的HTML 网站中将文本块放在图像上。上网google了一阵子，幸运的找到了以下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 的特殊方法。问题类似于第一种方法，因为它的边界很清晰，不能适应屏幕。更糟糕的是，虽然我指定了真正的width 和height，但图像比原始尺寸小。

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

---

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

编辑 2：
我的要求：

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

Answer 1

让图像在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>