Question

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

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

>>> df.rename(columns={'time_x': 'time', 'time_y': 'time1'}, inplace=True)
>>> df
  name  time  time1
0  Tom    13      8
1  Tom    16      8
2  Ben    10      6
3  Ben    12      6

我的图像甚至没有显示出来。它只是空白。我希望我的ID为“ forside”的部分的图片FBIlled为100％屏幕宽度和高度。完整的代码可以在此处显示：https://codepen.io/anon/pen/maLYrZ

Answer 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;
}

<div class="bg"></div>

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

Answer 2

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

Answer 3

您的问题很简单。

您的部分为空，其大小可变。由于没有内容且没有大小要求，因此“框”为0px x 0px，不是文件不存在，而是文件太小而根本不存在。

通过在其中添加一些文字并更改图片地址来对您的Codepen进行编辑

让我知道您是否还有其他问题。

Answer 4

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

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

我建议将以下div样式替换为：

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

如果这可行，请将url替换为图像的路径，然后将最小高度更改为适合您的高度。希望这会有所帮助！

为什么我的图像不适合100％背景

4 个答案: