Question

我有这个结构：

＆＃13;

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>

＆＃13;

我需要在容器上使用background-image，但它没有任何内容。只有标题，侧边栏和主要内容。如何在没有<div id="container"> <div id="header></div> <div id="content> <div id="sidebar"></div> <div id="main"></div> </div> </div>或指定高度（以像素为单位）的情况下执行此操作？

position: absolute很有用，但我想尝试动态尺寸。

Answer 1

基本上，您无法在没有内容或特定高度/宽度的容器上显示背景，因为它没有任何意义。

背景意味着内容的背面＆＃34;如果内容不具有放置背景的大小？：）

Answer 2

如果您大致了解容器将包含多少内容，则无需为其指定精确的高度。相反，请考虑使用min-height属性，如下所示：

＆＃13;

#container {
  background-color: black;
  min-height: 50px;
}

＆＃13;

<div id="container">
  <div id="header"></div>
  <div id="content">
    <div id="sidebar"></div>
    <div id="main"></div>
  </div>
</div>

＆＃13;

如果您正在设置背景，则表示它将显示在内容所在区域内的所有内容后面。因此，必须指定最小高度才能显示背景无需任何固定，不可更改的高度且容器内没有任何内容。

Answer 3

试一试： -

background: url("image.png") no-repeat 105% 105%;

Answer 4

试试这个：

#container {
min-height: 200px;
background-image: url('your-image.png');
}

Answer 5

正如其他人所注意到的那样，拥有一个没有内容的容器并没有多大意义......但是如果你真的想这样做，你可以在padding上使用#container给它大小的图像：

＆＃13;

#container {
  background-image: url(https://lorempixel.com/g/800/600/);
  background-size: cover;
  padding-bottom: calc(100% * (600/800));
}

＆＃13;

<div id="container">
    <div id="header></div>
    <div id="content>
        <div id="sidebar"></div>
        <div id="main"></div>
     </div>
</div>

＆＃13;

这样，容器将与背景图像具有相同的宽高比。

JSFiddle

如何在没有内容的容器上使用背景图像？

5 个答案: