在带有深色边框的图像底部添加文本

Question

我正在尝试在图像的末尾添加深色边框并在其上写入文字。我附上了我想要的屏幕截图。 有谁知道如何解决这个问题？

Answer 1

我猜这样的事情？

您应该在position CSS上阅读元素。 Position absolute and relative

Fiddle for you

<div class="container">
    <img src="http://placehold.it/200x150" alt="" /> 
    <span>Here's your text</span>
</div>

* {
    box-sizing: border-box;
}
.container {
    position: relative;
}
.container span {
    position: absolute;
    bottom: 0px;
    background-color: red;
    width: 200px;
    display: block;
    padding: 10px 15px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

Answer 2

检查一下。我为你更新了这个小提琴！ http://jsfiddle.net/EgLKV/5712/

   #container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}
#text
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    text-align:center;
    top:350px;
    width: 400px;
    background: #0686c9;

}

Answer 3

Alex's

CODE

＆＃13;

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;