标题的背景颜色未显示在img

时间:2018-01-17 00:36:20

标签: html css bootstrap-4

我的HTML div元素中有一个图像,一个标题将叠加在它上面。标题的背景颜色为宽度的全长。

enter image description here

但是当我向上移动标题以使其覆盖在图片上时,背景颜色消失了。我尝试过z-index,但这似乎不起作用。

enter image description here

<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;
}

更新后的照片:

enter image description here

1 个答案:

答案 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。