Question

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

/* 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;＆lt; - （以填充视口的大小），它们将显示背景图像。如果div不包含任何内容，则div的高度为0，因为背景图像不会影响div的高度。

如果您使用填充文字添加<p>标记并且未指定高度，则您会看到div仅与内容一样高。

Answer 2

首先，您必须设置elemenets的高度和宽度以及显示块

<div class="container">

    <div class="row">

      <div class="col-md-6">

        <div class="img" style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div>

      </div>

      <div class="col-md-6">

        <div class="img" style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div>

      </div>

      <div class="col-md-6">

        <div class="img" style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div>

      </div>

    </div>

</div> <!-- /container -->


//css 

.img{
  width: 480px;
    height: 480px;
    display: block;
}

图像不在div上显示为背景图像

2 个答案: