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>

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些