我对这个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>
