Как разместить текстовый блок над изображением?

Question

Я пытаюсь заложить текстовый блок над изображением на моем HTML веб-сайте. Я Googled в Интернет на некоторое время, и к счастью нашел 4 метод следующим образом:

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

 
\t <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"> 
 
\t <span style="color:#fcc">some text...</span> 
 
</div> 
 

 
<!--method 3 --> 
 
<div style="position:relative; width: 738px; height: 284px"> 
 
\t <span style="position:absolute; left:50; bottom:50; color:#fff; font-weight:bold">some text</span> 
 
\t <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>

Но ни один из этих четырех методов не генерируют желаемый эффект, как я хочу. Вы можете обратиться к следующим цифрам. 1-й метод может точно позиционировать текстовый блок над изображением. Однако изображение не может автоматически адаптироваться к экрану. Например, если я посещаю веб-страницу со смартфона, отображается только левая часть изображения. Кстати, вы можете видеть, что граница похожа на квадрат с острым углом. Второй метод похож на 1-й, за исключением того, что текстовый блок нельзя точно установить. 3-й метод автоматически адаптирует изображение к экрану. На границе показаны линии кривой, которые выглядят очень хорошо. Но я не могу точно позиционировать текст. Как вы видите, в моем коде я использую left:50; bottom:50;, который выходит с текстовым боком только в верхнем левом углу. 4-й метод является специальным с table. Проблема аналогична 1-му методу в том, что границы жесткие и не могут адаптироваться к экрану. Хуже того, изображение меньше его первоначального размера, хотя я указал истинные width и height.

Можете ли вы придумать лучшее решение, отвечающее моим требованиям?

---

EDIT 1:
Для метода 3, если я выбираю em в качестве параметра позиции, он работает сейчас! Я не знаю, почему pixel не отображает текст в указанной позиции.

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