css - 图像周围不需要的边框不是 CSS 边框或使用 Bootstrap 4 的轮廓

Question

我正在使用 Bootstrap4 中的卡片，并将图像源替换为 .PNG 图像。但是，它显示不需要的边框。它不是边框或轮廓。

这是HTML

<div class="row">
  <div class="col-md-3">
    <div class="card mb-3">
      <img class="i-home">
    </div>
  </div>
  <div class="col-md-3">
    <div class="card mb-4 box-shadow">
      <img class="i-solar">
    </div>
  </div>
  <div class="col-md-3">
    <div class="card mb-4 box-shadow">
      <img class="i-buy">
    </div>
  </div>
  <div class="col-md-3">
    <div class="card mb-4 box-shadow">
      <img class="i-advantage">
    </div>
  </div>
</div>

这是我的CSS

.col-md-3{
    padding:50px;
}

.col-md-3 .card{
    border: 0 none !important;
    background: transparent;
}

.i-home{
    display: block;
    background: transparent url(../img/ihome.png) no-repeat;
    background-position-x: center;
    background-position-y: center;
    border: none;
    height: 225px;
    width: 100%;
 }

更新: 图片没有任何边框

Answer 1

边界线当然会来。为什么因为你还没有添加图像标签的 src 链接

<img class="i-home"> : 错过了 src。尽管您已经通过背景添加了图像，但您必须在图像标签中传递 src。如果不是，浏览器将认为是无效标签声明。所以默认情况下，丢失的图像将用边框指示

解决方案1:

在 src 链接中传递一个透明图像 <img class="i-home" src="transparent image link">

解决方案2:

将图像标签替换为跨度标签 <span class="i-home"></span>