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

By simon at 2018-02-28 • 0人收藏 • 68人看过

我从Bootstrap 4使用卡,并用.PNG替换了图像源 图片。但是,它显示不需要的边框。这不是'边框或轮廓。 Snapshot这是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%;
 }
更新:图像没有任何边框![主页图像 - .PNG](HTTPS://i.stack.imgur.com/Gaovr.png)

5 个回复 | 最后更新于 2018-02-28
2018-02-28   #1

当然边界线会来。为什么因为你没有添加src链接 图像标签 <img class="i-home">:错过了src。 Eventhough您通过背景添加了图像, 你必须通过图像标签中的src。如果不是,浏览器会认为是 * INVA盖子标签声明。所以默认情况下会显示丢失的图像 与边界周围 *解决方法1: 通过透明图片在src链接<img class="i-home" src="transparent image link"> 溶液2: 用span标记<span class="i-home"></span>替换图像标记

2018-02-28   #2

你在卡类里面有img标签,所以默认在bootstrap 4中 .card的默认样式为border: 1px solid rgba(0,0,0,.125);通过删除 覆盖像border:none;这样的CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <style>
  .i-advantage{
    display: block;
    background: transparent url(https://www.w3schools.com/bootstrap4/cinqueterre.jpg) no-repeat;
    background-position-x: center;
    background-position-y: center;
    border: none;
    height: 225px;
    width: 100%;
 }
 .card {
    border: none;
}
  </style>
  
</head>
<body>
<div class="container">
<div class="card mb-4 box-shadow">
  <img class="i-advantage">
  </div>
</div>
</body>
</html>

2018-02-28   #3

只需将卡片类别border-0添加到卡片区域即可从中删除边框 卡片。 边界通常是card造型但是border-0可以 去掉它。 建议尽可能使用本机Bootstrap类(而不是自定义CSS黑客),因为自定义黑客往往限制了有用性 一般Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

2018-02-28   #4

当然边界线会来。为什么因为你没有添加src链接 图像标签 <img class="i-home">:错过了src。 Eventhough您通过背景添加了图像, 你必须通过图像标签中的src。如果不是,浏览器会认为是 * INVA盖子标签声明。所以默认情况下会显示丢失的图像 与边界周围 *解决方法1: 通过透明图片在src链接<img class="i-home" src="transparent image link"> 溶液2: 用span标记<span class="i-home"></span>替换图像标记

2018-02-28   #5

而不是* img 标签使用 div 拉取图像。 *对于一个实例:尝试* div class =“我家”代替 img CLASS =“我家” *

登录后方可回帖

Loading...