代码之家 › 专栏 › 技术社区 › Milan Bastola

仅在Bootstrap 4图IMG中覆盖

bootstrap-4 css3 twitter-bootstrap css html

Milan Bastola · 技术社区 · 6 年前

我想在引导程序4中添加覆盖 图形IMG 只有。为此,我添加了div 覆盖下课 图形IMG

这是我的代码:

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

但是覆盖是消耗全宽度的,包括 COLD-MD 4 左右填充。像这样展示:

如何解决这个问题并加上覆盖层 图IMG 合适吗?

2 回复 | 直到 6 年前

Milan Bastola 6 年前

我解决了这个问题。我加了一个div 静止无功发生器 分类和放置 。图img&覆盖 里面。

这是我的新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;
}

结果是:

fen1x 6 年前

.overlay 在你的例子中是相对于 .col-md-4 .

添加 position: relative; 到 .service -那样 覆盖 会如你所愿。

.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 放 覆盖 里面。

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