Question

我的背景图片没有淡入，但我的导航栏是。（我希望我的背景图像淡入而导航栏不亮）

这是HTML

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: #272727;
}

body.home {
  background-image: URL("Homebc.png");
  background-size: cover;
  -webkit-animation: fadein 2s;
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

＆＃13;

<body class="home">
  <div>
    <header="navbar">
      <div>
        <a class="logo" href="Index.html">
          <img src="brandlogoNAV.png" height="57.6px" width="190px">
        </a>
          <ul>
          <li><a class="active" href="Index.html">HOME</a></li>
          <li><a href="About.html">ABOUT</a></li>
          <li><a href="Approach.html">OUR APPROACH</a></li>
          <li><a href="Contact.html">CONTACT</a></li>
          </ul>
      </div>
    </header>
  </div>

＆＃13;

提前致谢！

Answer 1

您无法为正文背景设置动画，您的代码也存在一些问题。请尝试以下代码 -

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: #272727;
}

.home {
  background-image: url("https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg");
  background-size: cover;
  height: 100vh;
  width: 100vh;
  -webkit-animation: fadein 2s;
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

＆＃13;

<body>
  <div class="home">
      <header class="navbar">
          <div>
              <a class="logo" href="Index.html">
                  <img src="brandlogoNAV.png" height="57.6px" width="190px">
              </a>
              <ul>
                  <li><a class="active" href="Index.html">HOME</a></li>
                  <li><a href="About.html">ABOUT</a></li>
                  <li><a href="Approach.html">OUR APPROACH</a></li>
                  <li><a href="Contact.html">CONTACT</a></li>
              </ul>
          </div>
      </header>
  </div>
</body>

＆＃13;

Answer 2

首先，您应该替换以下行：

<header="navbar">

使用

<header class="navbar">

然后，CSS文件中的正文选择器没有相应的结尾}。

除此之外，身体背景无法动画。

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: #272727;
}
body.home {
  background-image: url("http://via.placeholder.com/350x150");
  background-size: cover;
  -webkit-animation: fadein 2s;
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

＆＃13;

<body class="home">
  <div>
    <header class="navbar">
          <div>
              <a class="logo" href="Index.html">
                <img src="http://lorempixel.com/400/200" height="57.6px" width="190px">
              </a>
              <ul>
                <li><a class="active" href="Index.html">HOME</a></li>
                <li><a href="About.html">ABOUT</a></li>
                <li><a href="Approach.html">OUR APPROACH</a></li>
                <li><a href="Contact.html">CONTACT</a></li>
              </ul>
          </div>
      </header>
  </div>
</body>

＆＃13;

我的背景图片没有淡入（但导航栏是）

2 个答案: