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

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;
}