Question

我只想将叠加层添加到引导程序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 中？

Answer 1

您示例中的

.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添加一些包装并将{{1 }}。

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

Answer 2

我解决了这个问题。我添加了一个具有 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;
}

这是结果：

仅在Bootstrap 4中覆盖图-img

2 个答案: