Question

出于某种原因，Bootstrap正在弄乱div上的背景图像。

html代码：

<div class="wide">
  <div class="col-xs-5 line">
    <hr>
  </div>
  <div class="col-xs-2 logo">
    Logo
  </div>
  <div class="col-xs-5 line">
    <hr>
  </div>
</div>

CSS：

.wide {
  width: 100%;
  height: 100%;
  height: calc(100% - 1px);
  background-image: url(http://wp.df.uba.ar/sociofis/wp-content/uploads/sites/11/2016/08/Epidemias4.png);
  background-color: #ccccc1;  /* Color if image unavailable */
  background-size: cover;
}

.logo {
  color: #000;
  font-weight: 800;
  font-size: 14pt;
  padding: 25px;
  text-align: center;
}

.line {
  padding-top: 20px;
  overflow: hidden;
  text-align: center;
}

.line hr {
  border-color: #000;
}

JSFiddle including Bootstrap。

JSFiddle not including Bootstrap

我试图复制this example但无济于事。这不是jsfiddle的问题，因为通过将完全相同的代码复制并粘贴到new jsfiddle，它可以正常工作。

显然问题出在图像本身。通过原始示例中的图像，背景可以正确加载，并且通过我测试的背景，它不会。

Answer 1

您的<body>元素的高度为零，而您的.wide元素正在使用height: calc(100% - 1px)，这意味着100%的{{1}}为0 - 1px。

让你的身体元素高度为100％...

https://jsfiddle.net/w6y2nrfy/

包含Bootstrap CSS时，背景图像不出现在div上

1 个答案: