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

时间:2015-07-10 23:44:56

标签: html css

到目前为止,我得到了相应的图像和方框。不过我的问题是,当我去添加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内添加内容,但是该框会上升,我希望它会下降。这就是我所说的:

enter image description here

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

3 个答案:

答案 0 :(得分:2)

对于已知身高,请修改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;

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

尝试制作&#34;身高&#34;负值。那应该有效,但我无法保证会这样做。所以而不是:

height: 255px;

DO,

height: -255px;

让我知道它是如何工作的! :)