我对这个 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 {
}
最佳答案
你可以使用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>
关于html - 我想让这个 <p> 标 checkout 现在图片的底部吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35748354/