Question

出于某种原因，我的网站不想显示我在div上设置的背景图像。

我希望在整个页面上显示一个特色图片（有点像在微软的主页上）。但是，图像并不想显示。

我尝试过禁用AdBlock和其他任何扩展程序都无济于事，我也尝试在论坛上查看是否可以找到任何内容（我还没有找到）。

以下是我的HTML：

<body>
<div class="container">
 <div class="content">
  <div class="featured-img-display imgdisplay" data-lazyload="undefined" data-bgfit="cover" data-bgposition="right center" data-bgrepeat="no-repeat" data-lazydone="undefined" src="/data/img/game_data/19a017f91q.jpg" data-src="/data/img/game_data/19a017f91q.jpg">

  </div>
 </div>
</div>
</body>

我的相关＆＃39; CSS：

.container {
    left:15%;
    width:70%;
    margin:0px auto;
}

.content {
    background-color: #FFF;
    border: 1px solid #F2F2F2;
    padding-bottom:100px;
    padding:40px;
    width:90%;
    margin:0px auto;
    padding-top:100px;
}
.featured-img-display{
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image: url('/data/img/game_data/19a017f91q.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

由于

小提琴：https://jsfiddle.net/ses3j1Ld/

Answer 1

目前，featured-img-display元素没有高度。这就是你没有看到背景图片的原因。

height: 100%;只会在元素上设置全屏高度，如果其父元素实际上也有100％的屏幕高度。

要使用％单位执行此操作，您需要确保featured-img-display元素之前的所有元素都具有100％的高度，例如：

html,body,.container,.content {
     height: 100%
}

然后您当前的CSS代码将起作用。但有时候上面的代码不太可行。

在此处使用视口单元：height: 100vh;让事情变得更轻松

<小时/> 注意：

如果您希望图像跨越整个屏幕高度（并且没有滚动条），则必须稍微调整一下CSS：

1）使用body { margin:0 }

删除默认保证金

2）您已使用背景图像在元素的父元素上设置了填充和边框...您可能希望在图像元素本身上设置这些属性，并将box-sizing设置为{{1 }}

Codepen demo

Answer 2

JSON.stringify()的高度是使其工作的百分比值必须确定父级的高度，唯一的例外是根元素.featured-img，它可以是百分比高度。

html

body, html{
  height: 100%;
  width: 100%;
}
.container {
    left:15%;
    width:70%;
  height: 100%;
    margin:0px auto;
}

.content {
    background-color: #FFF;
    border: 1px solid #F2F2F2;
    padding-bottom:100px;
    padding:40px;
    width:90%;
  height: 100%;
    margin:0px auto;
    padding-top:100px;
}

.featured-img-display{
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image: url('http://i.imgur.com/IMiabf0.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

Answer 3

您可以尝试使用img标签而不是div。我认为这可能有效

Answer 4

好吧，你的所有div .container，.content和.featured-img-display都没有高度。 height:100%表示高度等于元素的父级，但由于这些元素都没有任何高度，height: 100%等于0px。宽度也一样。

因此，其中一个div必须具有特定的高度和宽度。这是一个example.：

Div上显示的背景图片

4 个答案:

Codepen demo