Question

我正在尝试创建一个包含不同部分的页面，第一部分显示菜单和背景图像，然后在其下有一个白色部分，其高度为500像素。

由于某种原因，我似乎无法很好地适应自己的形象。现在，它甚至都没有显示图像，我也不确定为什么。

如何使图像适合屏幕，然后在其下方添加可以滚动到的白色部分？

* {
    margin: 0;
    padding: 0;
}


#firstSection {
    background-image: url("https://i.imgur.com/xZjqUcR.png") no-repeat;
    background-size: cover;
    height: 700px;
}


#secondSection {
    height: 500px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>


    <section id="nav-bar">

    </section>

    <section id="firstSection">

    </section>

    <section id="secondSection">

    </section>

</body>

这是我要实现的目标，如果向下滚动，则应该有一个500px高的部分。

Answer 1

将background-size调整为auto 100%，然后将背景放在右边：

* {
  margin: 0;
  padding: 0;
}

#firstSection {
  background: url("https://i.imgur.com/xZjqUcR.png") right no-repeat;
  background-size: auto 100%;
  height: 500px;
}

#secondSection {
  height: 500px;
}

<section id="nav-bar">

</section>

<section id="firstSection">

</section>

<section id="secondSection">

</section>

Answer 2

您的代码段中有几个错误。首先，为了使用引导程序，您必须首先包含jquery-这会导致代码段中的脚本错误（可能不是本地的！）

未显示图像的原因是因为您在background-repeat的同一行中设置了background-image；如果要在一行中列出您的设置，只需使用background。

使用包含而不是覆盖可能会获得更好的结果。另外，我会在CSS中设置宽度。请参见摘要。

* {
  margin: 0;
  padding: 0;
}


body {
  width: 100%;
}

#firstSection {
  height: 700px;
  background-image: url("https://i.imgur.com/xZjqUcR.png");
  background-repeat: no-repeat;
  background-size: contain;
  /*or put these on one line using background: url etc no-repeat contain*/
}

#secondSection {
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<section id="nav-bar">

</section>

<section id="firstSection">

</section>

<section id="secondSection">

</section>

如何创建具有背景图像的部分？

2 个答案: