图像底部的浮动文本

Question

我正在尝试创建类似这样的东西： 但是我只是做错了。 到目前为止，这是我所拥有的： jsfiddle 。
HTML：

<div class="review">
    <div class="review-head">
        <h2> Batman Arkham Knight Review </h2>
    </div>
</div>

CSS：

.review-head {
    height: 20em;
    background: url(http://www.flickeringmyth.com/wp-content/uploads/2014/03/Arkham-Knight2.jpg) no-repeat center center;
    background-size: cover;
}
h2 {
    color: white;
    vertical-align: center;
}

我在这里想念什么？
不管是否重要，我都试图将图像放入Bootstrap面板中。 感谢帮助！

Answer 1

给您的review-head元素一个position 。 这将允许您在其中放置h2 。

 .review-head { height: 20em; background: url(http://www.flickeringmyth.com/wp-content/uploads/2014/03/Arkham-Knight2.jpg) no-repeat center center; background-size: cover; position: relative; } h2 { color: white; vertical-align: center; position: absolute; bottom: 20px; left: 20px; } 

 <div class="review"> <div class="review-head"> <h2> Batman Arkham Knight Review </h2> </div> </div> 

Answer 2

将h2更改为此：

h2 {
    color: white;
    position:absolute;
    bottom: 0px;
}

我的建议是使用具有id或class的div元素来实现这一点。 例如<div class="imgTextFooter" ></div>并在此处应用您想要的样式:)

忘记添加，您必须添加position:relative对于.review-head

小提琴

Answer 3

加

position: relative;

到父级

加

position: absolute; 
bottom: 0;

到h2。