html - 背景图像顶部的文本和按钮

Question

我正在尝试在背景图片上添加文本和按钮，但我无法弄清楚液体页面上边距和位置的 CSS。如果你能引导我朝着正确的方向前进或提供帮助。谢谢!

.feature_home{
    margin:?
    position:?
  }
.feature_image{
    margin:?
    position:?
  }
.feature_text{
    margin:?
    position:?
  }
.feature_button{
    margin:?
    position:?
  }

<div class="feature_home">
<img class="feature_image" alt="Thanks For your guys help" src="images/xyz.com">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
</div>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx background Image               x                x                   Text Here:   Xx                   Text Here:   x                             x                                xx                   Button Here: x  x                                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

在我获得 10 个发布图片的声誉之前，它不会让我发布图片。

Answer 1

这是您要找的吗？

.feature_home{
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    width: 350px; /* image width */
    height: 150px; /* image height */
}

.feature_image{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

<div class="feature_home">
    <img class="feature_image" alt="Thanks For your guys help" src="http://placehold.it/350x150">
    <p class="feature_text">I really appreciate your guys help!</p>
    <a class="feature_button" href="/xyz-101/">Thank You</a>
</div>

http://jsfiddle.net/7zvL5zto/2/