html - 没有出现背景图像，只有正常的白色背景

Question

我正在尝试设置一个背景图像，然后我可以对其进行模糊处理，但是当我尝试创建一个 class="background"类时，它似乎不起作用并且在背景上保持白色。

我最初将背景图像设置为正文，但当我设置模糊代码时，它只会使整个页面变蓝。

我也试过用 ID 而不是类来做

.background {
  background-image: url("HillSide.jpeg");
  background-size: cover;
}

#header {
  height: 200px;
  /*Height of the block*/
  line-height: 100px;
  /*centers the text at 100px between 200px*/
  margin-left: 10px;
  /*Makes the block 10px from screen left side*/
  margin-right: 50px;
  /*Makes the block 100px from screen right side*/
}

#BlenkaLogo {
  height: 200px;
  /*Changes the logo height to 200px*/
  display: inline;
  /*Changing to an inline element instead of a block element*/
}

ul {
  min-width: 400px;
  /*The minimum width of the element in total*/
  display: inline;
  /*Make it an inline element*/
  float: right;
  /*change to the right hand side*/
  margin: auto;
  /*Margin as 0/auto*/
}

li {
  font-size: 30px;
  font-weight: bold;
  font-family: arial;
  display: inline;
  /*Make it an inline element*/
  margin-left: 50px;
  /*padding between text*/
}

#header a {
  color: black;
  letter-spacing: 0.2em
}

<div class="background"></div>
<div id="header">
  <!--header block-->
  <img src="BlenkaLogo.jpeg" id="BlenkaLogo" href="index.html">
  <!--Blenka Logo with link o homepage-->
  <ul>
    <!--List of about and Amazon link-->
    <li>
      <a href="https://rads.stackoverflow.com/amzn/click/com/B07QC93DV7" rel="nofollow noreferrer" style="text-decoration: none">Buy on Amazon</a>
      <!--Amazon Link-->
    </li>
    <li>
      <a href="" style="text-decoration: none">About</a>
      <!--About page link-->
    </li>
  </ul>
</div>

我希望它至少能在页面上创建一个图像，我错过了什么？

Answer 1

发生这种情况是因为您的“背景”div 是空的，并且没有高度/宽度的样式。所以，它没有渲染。将一些东西放入您的 div/provide 尺寸中，它将与背景一起呈现。