HTML – 我希望这个标签到达图像的底部？

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

HTML

<div class="maincon">
    <div class="picon" style="background-image: linear-gradient(to bottom,rgba(0,.02),.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 {

}

解决方法

绝对位置绝对和相对.你可以使用flexBox module.it支持所有最新的浏览器.

.element {
  height: 80vh;
  background: linear-gradient(to bottom,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>

原文地址：https://www.jb51.cc/html/224751.html