为什么我的图像不适合 100% 背景答案

【问题标题】：Why does my image not fit 100% background为什么我的图像不适合 100% 背景
【发布时间】：2019-06-02 07:20:20
【问题描述】：

我正在尝试使我的背景图像适合 100% 的屏幕宽度和高度。但它甚至没有显示我的形象。任何可以告诉我，我做错了什么。

在这里您可以看到我尝试过的代码。而且我不明白为什么它不起作用。

<section id="forside" >
      <div class="container">
            <div class="row">
            </div>
      </div>
</section>

#forside {
    background: url(images/FBIlled.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我的图像甚至没有显示出来。它只是空白。我希望我的 id="forside" 部分的图像 FBIlled 为 100% 屏幕宽度和高度。完整代码可以在这里显示：https://codepen.io/anon/pen/maLYrZ

【问题讨论】：

标签： html css

【解决方案1】：

更好的主意：

body, html {
  margin: 0;
  height: 100%;
}

.bg { 
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%; 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

&lt;div class="bg"&gt;&lt;/div&gt;

将代码放在 div 中。
取自https://www.w3schools.com/howto/howto_css_full_page.asp。

【讨论】：

这正是我所需要的！非常感谢。你知道为什么我的不工作吗，是因为 body, html { height: 100%; } 不在那里？

【解决方案2】：

也许是因为 div 是空的？我测试了为您的 div 添加宽度和高度，并且图像的背景效果很好。

【讨论】：

【解决方案3】：

你的问题很简单。

您的部分是空的，它的大小是可变的。由于没有内容和大小要求，“框”为 0px x 0px，并不是文件不存在，而是文件太小以至于不存在。

通过在其中添加一些文本并更改图像地址来编辑您的 codepen 并且它可以工作

如果您有任何其他问题，请告诉我。

【讨论】：

【解决方案4】：

您遇到的问题是由于将元素完全留空引起的。由于行、内容或 forside div 中没有任何内容，因此高度为 0。要解决此问题，请使用 CSS 显式设置高度或最小高度（height:100px 或 min-height:100px，其中 100px 是您的图像的大小）。

您遇到的另一个问题是实际属性名称，它应该是background-image: url("path/to/image.jpg")。 This page 有一些关于背景图片的好信息。

我建议将 forside div 样式替换为：

#forside {
    background-image:url(https://placeimg.com/640/480/any);
    min-height:100px;
}

如果可行，请将 url 替换为图片的路径，并将 min-height 更改为适合您的值。希望这会有所帮助！

【讨论】：