在圖像響應時引導文本

Question

我有這個標記。 我快瘋了，我真的不知道該怎么做。 我正在嘗試使用包裝紙和覆蓋紙，但是沒有用。 它也必須響應，圖像和文本也要響應。 請幫忙。 謝謝！

這是我的標記和CSS：

<div class="franja_blanca ">
<div class="container">
<div class="wrapper">
<div class="header-img">
<img class="img-responsive" src="../header/818.png" alt="">
</div>
<div class="overlay">
<div class="texto_naturopatia">
Here is my text 1</div>
</div>
</div>
</div>
</div>

.header-img{
    text-align:center;
    background-color:#fff;
    display:inline-block;
}

.header-img img {
 display:inline-block;
}



.wrapper {
    display: inline-block;
    position: relative;
}


.wrapper .overlay {
    color: #333333;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.wrapper .overlay {
    color: #333333;
}




.franja_blanca {
    text-align:center;
    height: 100px;
    background-color:#fff;
}

Answer 1

嘿，我為你做了一些編碼，
希望能幫助到你！
這是演示鏈接： https : //jsfiddle.net/j5rc1eyL/2/

<div class="position">
<div class="greybg">
    <p> HERE IS TEXT 2 HERE IS TEXT 2</p>
</div>
<div class="imagebox">
    <p>IMAGE
    <br>
    <br>
    <br>
    HERE IS TEXT 1 HERE IS TEXT 1
    </p>

</div>
</div>

.imagebox{
    max-width:300px;
    margin:auto;
    padding: 5px;
    background-color:#0F1955;
    text-align:center;
    color:white;
    font-size:14px;
    box-shadow: 2px 2px 5px black;
}

.greybg {
    background-color: #575756;
    color: #FFF;
    padding: 50px 0px 5px;
    text-align: center;
    margin-bottom: -155px;
}

.position {
    margin-top:70px
}