我希望这个<p>标记位于图像底部吗？

我对这个html / css完全陌生，我试图用背景作为图像来浮动文本。是的，但是问题是文本浮动在图像的顶部。如果使用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 {

}