如何使用 div 制作完整的背景图像答案

【问题标题】：How to make a full background image with divs如何使用 div 制作完整的背景图像
【发布时间】：2019-06-23 21:35:53
【问题描述】：

在第一页（开始按钮所在的位置）应该是带有文本“Start de reis”和橙色开始按钮的图像。但我不知道我做错了什么。

在我的 sn-p 上，文本和背景文本是白色的，所以由于某种原因你看不到我网站的其余部分，但希望这并不重要。

有人可以帮忙吗？如果是这样，非常感谢。

  body {
      position: relative;
      background-color: black;
      height: 100%;
  }

  #section1 {
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  #section2 {
      padding-top: 50px;
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  #section3 {
      padding-top: 50px;
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  #section41 {
      padding-top: 50px;
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  #section42 {
      padding-top: 50px;
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  .voorstellen {
      max-width: 35%;
      font-size: 20px;
      color: white;
      margin: 0 auto;
      font-family: "Roboto"sans-serif;
      position: center;
      text-transform: none;
  }

  h1.startdereis {
      /* tekst met start de reis */
      color: white;
      text-transform: uppercase;
      font-size: 70px;
      text-align: center;
      font-family: sans-serif;
      z-index: 100;

  }

  .knop {
      /* start knop */
      margin-left: 100%;
      z-index: 100;
  }

  .knop1 {
      /* start knop*/
      border: 3px solid white;
      padding: 10px 30px;
      color: white;
      text-decoration: none;
      margin-right: 5px;
      font-size: 13px;
      text-transform: uppercase;
      background-color: darkorange;
      font-family: "Roboto", sans-serif;
      margin-left: -300px;
  }

  .a12345 {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) url(https://i.ibb.co/WppGWkx/straat.jpg);
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

  .logo {
      width: 100px;
      height: auto;
      filter: brightness(0) invert(1);
      float: left;
      margin-left: 2%;
  }

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style3.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>


<body data-spy="scroll" data-target=".navbar" data-offset="50">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img class="logo" src="http://www.pngonly.com/wp-content/uploads/2017/06/Lion-Tattoo-Clipart-PNG-Image-03.png"> </a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#section1">Home</a></li>
                        <li><a href="#section2">Voorstellen</a></li>
                        <li><a href="#section3">Hobby's</a></li>
                        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Toekomstdromen <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#section41">Toekomstdromen</a></li>
                                <li><a href="#section42">About</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div id="section1" class="container-fluid">

        <div class="container">
            <div class="a12345"></div>
            <div class="centered">
                <h1 class="startdereis">Start De Reis</h1>
                <div class="knop">
                    <a href="#section2" class="knop1"> Start </a>
                </div>
            </div>
        </div>
    </div>

    <div id="section2" class="container-fluid">
        <div class="voorstellen">

            <h2>Wie ben ik?</h2>
            <p>
                Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde
                in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Toen
                ik in de tweede klas wat Duits had geleerd en zover was om zelf een gesprek met mijn oma aan tegaan i.p.v dat mijn ouder het zouden vertalen stierf mijn rond die tijd jammer genoeg.
                <br><br>
                Het was misschien al een beetje duidelijk maar ik heb dus een familie die dus uit Duitsers en uit Nederlanders bestaat. Contact hebben met de Duitse kant van de familie is erg lastig omdat het best een stuk rijden is naar Duitsland. Als
                ik dus tijd doorbreng met famillie is het meestal met de famillie uit Nederland, wat ik eigenlijk niet heel erg vindt. Ik heb een hele leuke familie en daar ben ik erg blij mee.
                <br><br>
                Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon gewoontjes.
                Ikzelf zit op dit moment in de vierde klas op Het Baarnsch Lyceum. Mijn paket is NT en het gaat me wel goed af. De school vindt zelf dat ik het zo goed doe dat ik drie uur in de week niet meer hoef te komen. Heel bijzonder is het ook weer niet want
                die uren waren toch een soort van tussenuren. De bedoeling is dat je in deze uren, waar ik dus niet meer heen ga, huiswerk kan/moet maken dit doet alleen bijna niemand en iedereen zit eigenlijk gewoon te wachten totdat het saaie uur voorbij is.
                <br><br>
                Ik hoop dat ik nu genoeg over mezelf heb verteld en dat je nu al beter weet wie ik ben. Ik weet dat ik niet een heel spannend vaarhaal heb maarja, ik moet nou eenmaal een blog maken hè.
            </p>
        </div>
    </div>


    <div id="section3" class="container-fluid">
        <div class="voorstellen">
            <h2>Mijn hobby's</h2>
            <p>
                Toen ik in groep vijf zat vonden mijn ouders het maar een tijd dat ik op een sport ging. Op dat moment zat ik op scouting waar ik toen iedere zaterdag naar toe ging. Via een kies je sport folder ben ik op klimmen gekomen. Dit vond ik tijdens de proeflessen erg leuk maar al snel werd het saaier en saaier dus daar was ik snel weer van af. Vervolgens ben ik op honkbal gegaan, hier zit ik tot de dag van vandaag nog steeds op en ik heb nog steeds veel plezier tijdens het honkballen. Een sport vinden die ik leuk vond en een sport waar je niet snel geblesseerd kan raken, want ik raak heel snel geblesseerd, was heel erg moeilijk. Daarom ben ik dan ook heel erg blij dat ik honkbal heb geprobeerd.
                <br><br>
                Naast honkbal heb ik nog andere hobby's, vooral achter de computer of op de televisie. Ik vind het namelijk erg leuk om te gamen. Ik heb ook iets van tien verschillende spellen. Hier een klein lijstje van enkele populaire spellen die ik speel:
            </p>
            <ul>
                <li>Overwatch</li>
                <li>GTA V</li>
                <li>Fortnite</li>
            </ul>
            <p>
                Ook vind ik het heel fijn om af en toe een Netflix film te kijken of om een YouTube video te kijken.
                <br><br>
                De laatste hobby maar wel een van de leukste is piano spelen. Ik speel al sinds dat ik klein ben piano en tot de dag van vandaag ben ik er druk mee bezig. Toen ik kleiner was voelde het meer als een verplichting en was ik niet zo gemotiveerd maar nu ik wat ouder ben kan ik meer mijn eigen smaak uitkiezen en krijg ik meer plezier met piano spelen.
            </p>
        </div>
    </div>


    <div id="section41" class="container-fluid">
        <div class="voorstellen">
            <p>
                lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
            </p>
        </div>
    </div>

    <div id="section42" class="container-fluid">
        <div class="voorstellen">
            <p>
                lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
            </p>
        </div>
    </div>

</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

我认为您的“body”CSS 已被剥离，因为嵌入了这个 sn-p - 我做了一个小改动，以便应用这些样式以便在 SO 上查看它们。

接下来，我看到了 <h1> 标签中的文字——不是你说的图像，但我想这就是你的意思。 <h1> 标记以及其他所有标记都从导航栏下方的页面顶部开始。有多种方法可以解决此问题，可能还有更好的方法，具体取决于您网站其余部分的外观，但一种简单快速的方法是向#section1 添加一个margin-top。

开始按钮下方还有一些其他文本需要修复，但希望这能让您走上正轨。

  #section1 {
    margin-top: 80px;
  }
  #body {
      position: relative;
      background-color: black;
      height: 100%;
  }

  #section1 {
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  #section2 {
      padding-top: 50px;
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  #section3 {
      padding-top: 50px;
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  #section41 {
      padding-top: 50px;
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  #section42 {
      padding-top: 50px;
      height: auto;
      color: #fff;
      background-color: transparent;
  }

  .voorstellen {
      max-width: 35%;
      font-size: 20px;
      color: white;
      margin: 0 auto;
      font-family: "Roboto"sans-serif;
      position: center;
      text-transform: none;
  }

  h1.startdereis {
      /* tekst met start de reis */
      color: white;
      text-transform: uppercase;
      font-size: 70px;
      text-align: center;
      font-family: sans-serif;
      z-index: 100;

  }

  .knop {
      /* start knop */
      margin-left: 100%;
      z-index: 100;
  }

  .knop1 {
      /* start knop*/
      border: 3px solid white;
      padding: 10px 30px;
      color: white;
      text-decoration: none;
      margin-right: 5px;
      font-size: 13px;
      text-transform: uppercase;
      background-color: darkorange;
      font-family: "Roboto", sans-serif;
      margin-left: -300px;
  }

  .a12345 {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.ibb.co/WppGWkx/straat.jpg);
    height: 100px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

  .logo {
      width: 100px;
      height: auto;
      filter: brightness(0) invert(1);
      float: left;
      margin-left: 2%;
  }

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style3.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>


<body id="body" data-spy="scroll" data-target=".navbar" data-offset="50">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img class="logo" src="http://www.pngonly.com/wp-content/uploads/2017/06/Lion-Tattoo-Clipart-PNG-Image-03.png"> </a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#section1">Home</a></li>
                        <li><a href="#section2">Voorstellen</a></li>
                        <li><a href="#section3">Hobby's</a></li>
                        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Toekomstdromen <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#section41">Toekomstdromen</a></li>
                                <li><a href="#section42">About</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div id="section1" class="container-fluid">

        <div class="container">
            <div class="a12345"></div>
            <div class="centered">
                <h1 class="startdereis">Start De Reis</h1>
                <div class="knop">
                    <a href="#section2" class="knop1"> Start </a>
                </div>
            </div>
        </div>
    </div>

    <div id="section2" class="container-fluid">
        <div class="voorstellen">

            <h2>Wie ben ik?</h2>
            <p>
                Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde
                in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Toen
                ik in de tweede klas wat Duits had geleerd en zover was om zelf een gesprek met mijn oma aan tegaan i.p.v dat mijn ouder het zouden vertalen stierf mijn rond die tijd jammer genoeg.
                <br><br>
                Het was misschien al een beetje duidelijk maar ik heb dus een familie die dus uit Duitsers en uit Nederlanders bestaat. Contact hebben met de Duitse kant van de familie is erg lastig omdat het best een stuk rijden is naar Duitsland. Als
                ik dus tijd doorbreng met famillie is het meestal met de famillie uit Nederland, wat ik eigenlijk niet heel erg vindt. Ik heb een hele leuke familie en daar ben ik erg blij mee.
                <br><br>
                Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon gewoontjes.
                Ikzelf zit op dit moment in de vierde klas op Het Baarnsch Lyceum. Mijn paket is NT en het gaat me wel goed af. De school vindt zelf dat ik het zo goed doe dat ik drie uur in de week niet meer hoef te komen. Heel bijzonder is het ook weer niet want
                die uren waren toch een soort van tussenuren. De bedoeling is dat je in deze uren, waar ik dus niet meer heen ga, huiswerk kan/moet maken dit doet alleen bijna niemand en iedereen zit eigenlijk gewoon te wachten totdat het saaie uur voorbij is.
                <br><br>
                Ik hoop dat ik nu genoeg over mezelf heb verteld en dat je nu al beter weet wie ik ben. Ik weet dat ik niet een heel spannend vaarhaal heb maarja, ik moet nou eenmaal een blog maken hè.
            </p>
        </div>
    </div>


    <div id="section3" class="container-fluid">
        <div class="voorstellen">
            <h2>Mijn hobby's</h2>
            <p>
                Toen ik in groep vijf zat vonden mijn ouders het maar een tijd dat ik op een sport ging. Op dat moment zat ik op scouting waar ik toen iedere zaterdag naar toe ging. Via een kies je sport folder ben ik op klimmen gekomen. Dit vond ik tijdens de proeflessen erg leuk maar al snel werd het saaier en saaier dus daar was ik snel weer van af. Vervolgens ben ik op honkbal gegaan, hier zit ik tot de dag van vandaag nog steeds op en ik heb nog steeds veel plezier tijdens het honkballen. Een sport vinden die ik leuk vond en een sport waar je niet snel geblesseerd kan raken, want ik raak heel snel geblesseerd, was heel erg moeilijk. Daarom ben ik dan ook heel erg blij dat ik honkbal heb geprobeerd.
                <br><br>
                Naast honkbal heb ik nog andere hobby's, vooral achter de computer of op de televisie. Ik vind het namelijk erg leuk om te gamen. Ik heb ook iets van tien verschillende spellen. Hier een klein lijstje van enkele populaire spellen die ik speel:
            </p>
            <ul>
                <li>Overwatch</li>
                <li>GTA V</li>
                <li>Fortnite</li>
            </ul>
            <p>
                Ook vind ik het heel fijn om af en toe een Netflix film te kijken of om een YouTube video te kijken.
                <br><br>
                De laatste hobby maar wel een van de leukste is piano spelen. Ik speel al sinds dat ik klein ben piano en tot de dag van vandaag ben ik er druk mee bezig. Toen ik kleiner was voelde het meer als een verplichting en was ik niet zo gemotiveerd maar nu ik wat ouder ben kan ik meer mijn eigen smaak uitkiezen en krijg ik meer plezier met piano spelen.
            </p>
        </div>
    </div>


    <div id="section41" class="container-fluid">
        <div class="voorstellen">
            <p>
                lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
            </p>
        </div>
    </div>

    <div id="section42" class="container-fluid">
        <div class="voorstellen">
            <p>
                lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
            </p>
        </div>
    </div>

</body>

</html>

【讨论】：

嘿，我的文字错了，但我在我的 css 中制作了一张图片
我在里面看到 <div class="12345"> 问题是 height=100% 不能按您的预期工作（请参阅 stackoverflow.com/questions/21357238/…），而且 background-image 属性也需要逗号如果您要使用线性渐变和 URL。我更新了我的 sn-p 并现在输入 height=100px 以便我们可以看到它。您想让该图像看起来像什么？
（再次运行上面的sn-p看看目前的样子）
我希望图像全屏显示“启动 reis”和文本中间的橙色按钮。如果你按下橙色按钮，你会进入第 2 部分
全屏是指全宽，高不重要？您可以删除 a12345 和 H1 上的背景图像，或 body 标签本身。用我上面给你的东西试试其他类似的东西，我会看看。

【解决方案2】：

试试这个，你需要将高度分配给 div#section1

#section1 {
    height: 131px;
    color: #fff;
    background-color: transparent;
    margin-top: 246px;
}

而且背景图片语法也不正确

.a12345 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.ibb.co/WppGWkx/straat.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

您还需要检查所有元素的高度，因为它们的高度存在问题

【讨论】：

【解决方案3】：

您的导航栏是固定的，因此您的#section1 位于导航栏下方。这样，您有 2 个选项来纠正它：

.navbar {
        margin-bottom:40px; //or bigger
        }

或

#section1 {
          margin-top: 40px; //or bigger
          }

【讨论】：