javascript - 图像不显示为 div 上的背景图像

Question

有人可以解释为什么我的图片没有显示在我的测试网页上吗？ 我是否必须在 div 上设置高度/宽度才能显示完整图像？

演示: https://jsfiddle.net/t2nwevgL/

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.row div {
  background:blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
      <div class="col-md-6">
        <div style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div>
      </div>
      <div class="col-md-6">
        <div style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div>
      </div>
      <div class="col-md-6">
        <div style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div>
      </div>
    </div>
</div> <!-- /container -->

Answer 1

给div一个特定的高度，比如height: 500px;或 height: 100vh; <--(填充视口(viewport)的大小)，它们将显示背景图像。如果div不包含任何内容，则div的高度为0，因为背景图像不影响div的高度。

如果你把 <p>带有填充文本的标记并且不指定高度，您会看到 div 仅与内容一样高。