仅在 Bootstrap 4 figure-img 中叠加

Question

我只想将叠加层添加到 bootstrap 4 figure-img。为此，我在 figure-img

下添加了带有 overlay 类的 div

这是我的代码：

<div class="col-md-4">
  <figure class="service text-center">
    <img src="img/service1.jpg" class="figure-img img-fluid w-100" alt="Repair Request Service">
    <div class="overlay"></div>
    <figcaption class="figure-caption">
      <h4>Repair Request Service</h4>
      <p>We care about you and your vehicle. We want to make sure whether you see us for an auto repair or a scheduled maintenance, that we</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

CSS 是这样的：

.services .figure-img {
    margin-bottom: 0;
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    background: #f00;
    height: 100%;
    width: 100%;
    opacity: 0;
    display: none;
}
.service:hover .overlay {
    display:block;
    opacity: .3;
}

但叠加层占用了全宽，包括 col-md-4 左右填充。并显示如下：

如何解决这个问题，并在.figure-img中正确放置overlay？

Answer 1

我解决了这个问题。我添加了一个带有 svcimg 类的 div，并将 .figure-img & .overlay 放入其中。

这是我的新 HTML：

<div class="col-md-4">
  <figure class="service text-center">
    <div class="svcimg">
      <img src="img/service6.jpg" class="figure-img img-fluid w-100" alt="Erection on Metal Build">
      <div class="overlay"></div>
    </div>
    <figcaption class="figure-caption">
      <h4>Referrals Service</h4>
      <p>Customer referral is our most popular form of advertising. We greatly appreciate the confidence of your referral. To show our gratitude</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

这是我的 CSS：

.services .service .svcimg {
    position: relative;
}

.services .service .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #f41004;
    background: -moz-linear-gradient(top, #f41004 0%, #207cca 100%, #3557f3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f41004 0%,#207cca 100%,#3557f3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f41004 0%,#207cca 100%,#3557f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f41004', endColorstr='#3557f3',GradientType=0 ); /* IE6-9 */
        transition: 0.3s ease;
}

.services .service:hover .overlay {
    opacity: .5;
    transition: 0.3s ease-in-out;
}

结果如下：

Answer 2

您的示例中的.overlay 相对于.col-md-4 定位。

将position: relative; 添加到.service - 这样.overlay 将按您的预期工作。

.service .figure-img {
  margin-bottom: 0;
}

.service {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  background: #f00;
  height: 100%;
  width: 100%;
  opacity: 0;
  display: none;
}

.service:hover .overlay {
  display: block;
  opacity: .3;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="col-md-4">
  <figure class="service text-center">
    <img src="https://picsum.photos/800/600" class="figure-img img-fluid w-100" alt="Repair Request Service">
    <div class="overlay"></div>
    <figcaption class="figure-caption">
      <h4>Repair Request Service</h4>
      <p>We care about you and your vehicle. We want to make sure whether you see us for an auto repair or a scheduled maintenance, that we</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>

---

编辑

如果您想覆盖仅 img，而不是整个figure - 那么您需要为img 添加一些包装器并将.overlay 放入其中。

.service .figure-img {
  margin-bottom: 0;
}

.img-container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  background: #f00;
  height: 100%;
  width: 100%;
  opacity: 0;
  display: none;
}

.service:hover .overlay {
  display: block;
  opacity: .3;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="col-md-4">
  <figure class="service text-center">
    <div class="img-container">
      <img src="https://picsum.photos/800/600" class="figure-img img-fluid w-100" alt="Repair Request Service">
      <div class="overlay"></div>
    </div>
    <figcaption class="figure-caption">
      <h4>Repair Request Service</h4>
      <p>We care about you and your vehicle. We want to make sure whether you see us for an auto repair or a scheduled maintenance, that we</p>
      <a class="btn btn-primary" href="#">Read More</a>
    </figcaption>
  </figure>
</div>