Question

我正在尝试按照本教程进行Web开发课程。想法是在悬停在导航链接上时，使容器具有不同的背景图像。背景图像可以像预期的那样轻松地放置，但是静态背景图像没有出现。我已经在代码中倾注了几个小时，以查看所做的不同操作，但是我找不到问题。

Here is the tutorial I am following

这是我的CSS：

     * {
            margin: 0; padding: 0;
        }
        nav {
            width: 170px; height: 500px;
            background-color:  #ffffff;
            border: #000000 3px;
        }
        .wrapper {
            position: relative;
            overflow: hidden;
            margin: 100px auto;
            width: 800px;
            height: 500px;/*CHECK*/
            box-shadow: 10px 10px 10px rgba(0,0,0,0.3); 
        }
        .wrapper img {
            position: absolute;
            top: 0; left: 0;
            z-index: -60;/*makes nav images come in on top of static background image*/
        }    
        .wrapper li img {
            position: absolute;
            top: 0; left: 800px;
            z-index: -50;/*makes static background stay behind nav images*/
            transition: all 3s ease; /*experiment*/
        }
        ul {
            width:800px; height: 500px;
            list-style: none;
        }
        li a {
          z-index: 1;
          display: block;
          padding-left: 20px;
          width: 150px;
          height: 30px;
          background: white;
          color: #444;
          text-decoration: none;
          font: 14px/30px Helvetica, Verdana, sans-serif;
        }
        li:nth-child(1) {
          padding-top: 50px;
        }
        
        li a:hover {
          background: #eee;
        }
        
        li a:hover + img {
          left: 0px;
        }
        body {
            background-color: #ffffff;
        }

<div class="wrapper"><!--DIV SEPARATES NAV SECTION-->
            <nav>
            <h1>PAGE TITLE</h1>        
                <ul>
                    <li>
                      <a href="index.html">Home</a>
                      <img src="images/nav/fit/home.jpg" alt="">
                    </li>
                    <li>
                      <a href="afghan.html">Afghanistan</a>
                      <img src="images/nav/fit/afghan.jpg" alt="">
                    </li>
                    <li>
                      <a href="libya.html">Libya</a>
                      <img src="images/nav/fit/libya.jpg" alt="">
                    </li>
                    <li>
                      <a href="oki.html">Okinawa</a>
                      <img src="images/nav/fit/oki.jpg" alt="">
                    </li>
                    <li>
                      <a href="korea.html">Korea</a>
                      <img src="images/nav/fit/korea.jpg" alt="">
                    </li>
                </ul>
        </nav>    
        <img src="image/nav/fit/home.jpg" alt=""><!--STATIC BACKGROUND IMAGE-->
        </div>

任何帮助或建议将不胜感激。非常感谢

Answer 1

您的代码正确无误。问题位于您的 图像路径 上。检查以下小提琴，我用designshack图像替换了您的图像路径。检查以下link，以了解更多文件路径。

<img src="picture.jpg"> picture.jpg与以下文件位于同一文件夹中   当前页面

<img src="images/picture.jpg"> picture.jpg位于图像中   当前文件夹中的文件夹

<img src="/images/picture.jpg"> picture.jpg位于图像中   当前网站根目录下的文件夹

<img src="../picture.jpg"> picture.jpg位于文件夹之一   从当前文件夹升级

     * {
            margin: 0; padding: 0;
        }
        nav {
            width: 170px; height: 500px;
            background-color:  #ffffff;
            border: #000000 3px;
        }
        .wrapper {
            position: relative;
            overflow: hidden;
            margin: 100px auto;
            width: 800px;
            height: 500px;/*CHECK*/
            box-shadow: 10px 10px 10px rgba(0,0,0,0.3); 
        }
        .wrapper img {
            position: absolute;
            top: 0; left: 0;
            z-index: -60;/*makes nav images come in on top of static background image*/
        }    
        .wrapper li img {
            position: absolute;
            top: 0; left: 800px;
            z-index: -50;/*makes static background stay behind nav images*/
            transition: all 3s ease; /*experiment*/
        }
        ul {
            width:800px; height: 500px;
            list-style: none;
        }
        li a {
          z-index: 1;
          display: block;
          padding-left: 20px;
          width: 150px;
          height: 30px;
          background: white;
          color: #444;
          text-decoration: none;
          font: 14px/30px Helvetica, Verdana, sans-serif;
        }
        li:nth-child(1) {
          padding-top: 50px;
        }
        
        li a:hover {
          background: #eee;
        }
        
        li a:hover + img {
          left: 0px;
        }
        body {
            background-color: #ffffff;
        }

<div class="wrapper"><!--DIV SEPARATES NAV SECTION-->
            <nav>
            <h1>PAGE TITLE</h1>        
                <ul>
                    <li>
                      <a href="index.html">Home</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic1.jpg" alt="">
                    </li>
                    <li>
                      <a href="afghan.html">Afghanistan</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic2.jpg" alt="">
                    </li>
                    <li>
                      <a href="libya.html">Libya</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic3.jpg" alt="">
                    </li>
                    <li>
                      <a href="oki.html">Okinawa</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic4.jpg" alt="">
                    </li>
                    <li>
                      <a href="korea.html">Korea</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic5.jpg" alt="">
                    </li>
                </ul>
        </nav>    
        <img src="https://designshack.net/tutorialexamples/navpics/pic1.jpg" alt=""><!--STATIC BACKGROUND IMAGE-->
        </div>

导航悬停时背景图片的更改

1 个答案: