我的HTML div元素中有一个图像,一个标题将叠加在它上面。标题的背景颜色为宽度的全长。
但是当我向上移动标题以使其覆盖在图片上时,背景颜色消失了。我尝试过z-index,但这似乎不起作用。
<div class="card-body">
<div class="row">
<div class="col-6 portfolio-box">
<img src="assets/images/pexels-photo-450597.jpeg" alt="">
<h6 class="portfolio-title text-center text-white">Hangman</h6>
</div>
<div class="col-6">
</div>
</div>
</div>
CSS:
img {
height: 200px;
width: 100%;
padding: 0;
}
.portfolio-title {
background-color: #4aaaa5;
width: 100% !important;
padding-top: 10px;
height: 50px;
margin-top: -40px;
}
更新后的照片:
答案 0 :(得分:0)
body {
background: grey;
}
.portfolio-box {
position: relative;
}
img {
height: 200px;
width: 100%;
}
.portfolio-title {
background-color: #4aaaa5;
width: 100% !important;
padding-top: 10px;
height: 50px;
position: absolute;
bottom: 0;
margin: 0;
}
<div class="card-body">
<div class="row">
<div class="col-6 portfolio-box">
<img src="http://www.queness.com/resources/images/png/step1.jpg" alt="">
<h6 class="portfolio-title text-center text-white">Hangman</h6>
</div>
<div class="col-6">
</div>
</div>
</div>
编辑2:向容器添加位置,现在可以正常工作,没有z-index。