html - 我想让这个 <p> 标 checkout 现在图片的底部吗？

Question

我对这个 html/css 完全陌生，我正在尝试将带有背景的文本作为图像 float 。是的，我这样做了，但问题是文本 float 在图像的顶部。如果使用 margin-top 进行调整图片，它只是简单地拉下整个 div。在这里，我给出了我想要的图片表示。

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>