如何去除 img-overlay 卡中 card-img 的白线？

Question

我正在使用 Bootstrap 4.5 制作一个包含连续多列卡片的网页，但是 card-img 的边框 (?) 中有白线我可以'删除：

在 CSS 中，您可以观察到我在 card-img 处使用填充，试图确定这些是边界线还是其他东西，但我不理解它们的“父级”。

<div class="row row-flex d-flex row-black align-items-stretch">
    <div class="col-md-6 col-xl-4 card-col">
        <div class="card border-dark">
            <img class="card-img grad-bg1" aria-hidden="true">
            <div class="card-img-overlay">
                <h1 class="text-center"><i class="fa fa-flask text-light" aria-hidden="true"></i></h1>
                <h3 class="card-title">Flask!</h3>
                <h5 class="card-text text-center">It's a lab!</h5>
            </div>
        </div>
    </div>
</div>

CSS是

.row-black {
    background-color: #000;
    color: #fff;
    min-height: 286px;
    padding-top: 1.61%;
    padding-bottom: 1.61%;
    padding-left: 6.85% !important;
    padding-right: 6.85% !important;
    align-items: center;
    justify-content: center;
}

.card-col {
    margin-top: 1.61%;
    margin-bottom: 1.61%;
}

.card {
    background-color: transparent !important;
    border-radius: 30px;
    min-height: 350px;
    height: 100%;
    max-height: 350px;
    border: none !important;
    background: transparent;
}

.card-img {
    border-radius: 30px;
    height: 100%;
    border: none !important;
    margin: 0;
    padding: 10px;
}

.card-img-overlay {
    height: 100%;
    width: 100%;
    padding: 50px;
    align-items: center;
    justify-items: center;
    border: none !important;
}

.card-title {
    text-align: center;
    border: none;
}

.grad-bg1 {
    background: -moz-linear-gradient(135deg, rgba(60, 176, 219, 1) 0%, rgba(6, 26, 85, 1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(60, 176, 219, 1) 0%, rgba(6, 26, 85, 1) 100%);
    background: linear-gradient(135deg, rgba(60, 176, 219, 1) 0%, rgba(6, 26, 85, 1) 100%);
    height: 100%;
    width: 100%;
    border: none !important;
}

Answer 1

“边框”来自您的图片标签中缺少的 src 属性。

你可以在没有它的情况下实现你需要的，或者你可以简单地在图像标签中添加一个 src。

HTML

 <div class="row row-flex d-flex row-black align-items-stretch">
  <div class="col-md-6 col-xl-4 card-col">
    <div class="card border-dark">
      <div class="card-img-overlay grad-bg1">
        <h1 class="text-center">
          <i class="fa fa-flask text-light" aria-hidden="true"></i>
        </h1>
        <h3 class="card-title">Flask!</h3>
        <h5 class="card-text text-center">It's a lab!</h5>
      </div>
    </div>
  </div>
</div>

CSS

.row-black {
    background-color: #000;
    color: #fff;
    min-height: 286px;
    padding-top: 1.61%;
    padding-bottom: 1.61%;
    padding-left: 6.85% !important;
    padding-right: 6.85% !important;
    align-items: center;
    justify-content: center;
  }

  .card-col {
    margin-top: 1.61%;
    margin-bottom: 1.61%;
  }

  .card {
    background-color: transparent !important;
    border-radius: 30px;
    min-height: 350px;
    height: 100%;
    max-height: 350px;
    border: none !important;
    background: transparent;
  }

  .card-img-overlay {
    height: 100%;
    width: 100%;
    padding: 50px;
    align-items: center;
    justify-items: center;
    border: none !important;
  }

  .card-title {
    text-align: center;
    border: none;
  }

  .grad-bg1 {
    background: -moz-linear-gradient(
      135deg,
      rgba(60, 176, 219, 1) 0%,
      rgba(6, 26, 85, 1) 100%
    );
    background: -webkit-linear-gradient(
      135deg,
      rgba(60, 176, 219, 1) 0%,
      rgba(6, 26, 85, 1) 100%
    );
    background: linear-gradient(
      135deg,
      rgba(60, 176, 219, 1) 0%,
      rgba(6, 26, 85, 1) 100%
    );
    height: 100%;
    width: 100%;
    border: none !important;

    border-radius: 30px;
  }

演示

https://codepen.io/vagelisp/pen/yLaeMVg

如何去除 img-overlay 卡中 card-img 的白线？

How to remove white lines of card-img in an img-overlay card?

html

css

overlay

bootstrap-4