我希望这个<p>标签到达图像的底部？

Question

我对这个html / css完全不熟悉我试图将带有背景的文本浮动为图像。是的我做了但是问题是文本浮动在图像上。如果使用边距 - 顶部调整图像，它只是简单地拉下整个div.Here down我给了我想要的图形表示。

HTML

<div class="maincon">
    <div class="picon" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .8)), url('img/apple.jpg') "><p>Hi</p> 
    </div>
</div>

的CSS

.maincon {
    margin-top: 95px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

.picon {
    width: 100%;
    height: 80%;
    background: none center/cover #f2f2f2;
}

.picon p {

}

Answer 1

您可以使用position: absolute

.element {
  height: 100vh;
  background:linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .8)), url('http://cdn2.macworld.co.uk/cmsdata/features/3598128/iphone_6s_review_20.jpg');
  background-size: cover;
  position: relative;
}

p {
  position: absolute;
  color: white;
  font-size: 25px;
  margin: 10px;
  bottom: 0;
}

<div class="element">
  <p>Apple iphone</p>
</div>

Answer 2

没有位置absolute和relative。您可以使用flexbox module.it支持所有最新的浏览器。

.element {
  height: 80vh;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .8)), url('http://cdn2.macworld.co.uk/cmsdata/features/3598128/iphone_6s_review_20.jpg');
  background-size: cover;
  align-items: flex-end;
  display: flex;
}
p {
  color: white;
  font-size: 25px;
  margin: 10px;
}

<div class="element">
  <p>Apple iphone</p>
</div>

Answer 3

.maincon {
    margin-top: 95px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

.picon {
    width: 100%;
    height: 80%;
    background: none center/cover #f2f2f2;
    position: relative;
}

.picon p {
    position: absolute;
    bottom: 0;

}