在图像背景下方放置一个框

Question

到目前为止，我得到了相应的图像和方框。不过我的问题是，当我去添加height时，它会上升而不是下降。

我的小提琴 - https://jsfiddle.net/kg6pLk4e/

.post {
    height: 255px;
    font-size: 14px;
    position: relative;
    padding: 5px;
    margin-right: 3%;
    margin-top: 3%;
}
.box-one {
    background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.image-text {
    position: absolute;
    width: 100%;
    margin: 0;
    left: 0;
    font-weight: bold;
    color: white;
    text-align: center;
    background: black;
    bottom: 0;
    padding: 5px;
    height: 40px;
}

<div class="late-post grid-60 tablet-grid-50 mobile-grid-100">
    <div class="post box-one">                                                  
        <h1>Pottery</h1>
        <p class="image-text">Lorem Ipsum is simply dummy text of the printing and</p>                                                  
    </div>
</div>

基本上，我想在image-text内添加内容，但是该框会上升，我希望它会下降。这就是我所说的：

注意：白框正在覆盖图像。我不希望它覆盖图像。我希望白色的盒子向下而不是向上调整高度。

Answer 1

对于已知身高，请修改bottom值以匹配容器height。

.image-text {
    bottom: -40px;
    height: 40px;
}

＆＃13;

＆＃13;

.post {
    height: 100px;
    width: 500px;
    font-size: 14px;
    position: relative;
    /* padding: 5px; */
    /* margin-right: 3%; */
    /* margin-top: 3%; */
}
.box-one {
    background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* outline: 5px solid blue; */
}
.image-text {
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100%;
    margin: 0;
    font-weight: bold;
    color: white;
    text-align: center;
    background: black;
    /* opacity: .5; */
    /* padding: 5px; */
    height: 40px;
    line-height: 40px;
}

＆＃13;

<div class="post box-one">
    <h1>Pottery</h1>
    <p class="image-text">Lorem Ipsum is simply dummy text of the printing and</p>
</div>

＆＃13;

＆＃13;

＆＃13;

如果身高未知，您可以使用transform属性。

.image-text {
    bottom: 0;
    transform: translateY(100%);
}

＆＃13;

＆＃13;

.post {
    height: 100px;
    width: 500px;
    font-size: 14px;
    position: relative;
    /* padding: 5px; */
    /* margin-right: 3%; */
    /* margin-top: 3%; */
}
.box-one {
    background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* outline: 5px solid blue; */
}
.image-text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    font-weight: bold;
    color: white;
    text-align: center;
    background: black;
    /* opacity: .5; */
    padding: 10px 0;
    /* height: 40px; */
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
}

＆＃13;

<div class="post box-one">
    <h1>Pottery</h1>
    <p class="image-text">Lorem Ipsum is simply dummy text of the printing and</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我理解你的问题是正确的。你的.box-one没有位置设置。您必须设置父级的位置才能对子元素产生正确的影响。

.box-one {
position:relative;
}
.image-text {
position:absolute;
}

看看这里：https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 3

尝试制作＆＃34;身高＆＃34;负值。那应该有效，但我无法保证会这样做。所以而不是：

height: 255px;

DO，

height: -255px;

让我知道它是如何工作的！ ：）