大网格css没有图片显示

Question

我有一个网页，其中小型和中型的 css 可以正常工作并显示良好。我的问题是大的，所有的格式都正确，除了页面图片不会显示。我该如何解决？附件是页面布局和完整的css。错误应该在@media(min-width: 1024px)

下

header {
  background-color: #002171;
  color: #FFFFFF;
  background-position: right;
  background-repeat: no-repeat;
}

header a:link {
  color: #FFFFFF;
  text-decoration-line: none;
}

header a:visited {
  color: #FFFFFF;
  text-decoration-line: none;
}

header a:hover {
  color: #90C7E3;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  font-family: Georgia, serif;
  letter-spacing: 0.25em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

* {
  box-sizing: border-box;
}

nav {
  font-weight: bold;
  font-size: 120%;
  padding: 0;
  text-align: center;
}

nav li {
  border-bottom: none;
}

nav a {
  text-decoration: none;
}

section {
  padding-left: 2em;
  padding-right: 2em;
}

h2 {
  color: #1976D2;
  font-family: Georgia, serif;
  text-shadow: 1px 1px 1px #CCCCCC;
}

h3 {
  color: #000033;
  font-family: Georgia, serif;
}

@media(min-width: 600px) {
  nav ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    justify-content: space-around;
  }
  .content main {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
  }
  h2 {
    grid-row: 1 / 2;
    grid-column: 1 / 5;
  }
  section {
    grid-row: 2 / 3;
    grid-column: auto;
  }
  #special {
    grid-row: auto;
    grid-column: 1 / 5;
  }
  footer {
    grid-row: auto;
    grid-column: 1 / 5;
  }
}

@media(min-width: 1024px) {
  nav ul {
    flex-direction: column;
    padding-top: 1em;
  }
  nav {
    text-align: left;
    padding-left: 1em;
    padding-right: 1em;
    grid-row: 2/3;
    grid-column: 1/2;
  }
  main {
    grid-row: 2/3;
    grid-column: 2/3;
  }
  footer {
    grid-row: 3/4;
    grid-column: 2/4;
  }
  header {
    grid-row: 1/2;
    grid-column: 1/4;
  }
  #wrapper {
    margin: auto;
    width: 80%;
    border: #00008B;
    box-shadow: 1px 1px 1px;
    display: grid;
    grid-row: 3/3;
    grid-column: 2/2;
  }
}


}
main ul {
  list-style-image: url('marker.gif');
  font-family: Georgia, serif;
}
nav ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  font-size: 1.2em;
}
nav a:link {
  color: #5C7FA3;
}
nav a:visited {
  color: #344873;
}
nav a:hover {
  color: #A52A2A;
}
body {
  font-family: Helvetica;
  background-color: #EAEAEA;
  color: #666666;
}
main {
  background-color: #FFFFFF;
  padding-top: 1px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  overflow: auto;
  display: block;
}
dt {
  color: #002171;
}
#wrapper {
  background-color: #90C7E3;
  background-image: linear-gradient(#FFFFFF, #90C7E3);
}
#homehero {
  background-image: url('coast2.jpg');
  height: 300px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#yurthero {
  background-image: url('yurt.jpg');
  height: 300px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#trailhero {
  background-image: url('trail.jpg');
  height: 300px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.resort {
  font-weight: bold;
  color: #1976D2;
}
footer {
  background-color: #FFFFFF;
  font-family: Georgia, serif;
  font-size: 75%;
  font-style: italic;
  text-align: center;
  padding: 2em;
}
#contact {
  font-size: 90%;
}

<div id="wrapper">
  <header>
    <h1><a href="index.html">Pacific Trails Resort</a></h1>
  </header>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="yurts.html">Yurts</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="reservations.html">Reservations</a></li>
    </ul>
  </nav>
  <div id="homehero">
  </div>
  <main>
    <h2>Enjoy Nature in Luxury</h2>
    <p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order
      breakfast each morning.</p>
    <ul>
      <li>Unwind in the heated outdoor pool and whirlpool</li>
      <li>Explore the coast on your own or join our guided tours</li>
      <li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
      <li>Savor nightly fine dining with an ocean view</li>
    </ul>
    <div id="contact">
      <span class="resort">Pacific Trails Resort</span><br> 12010 Pacific Trails Road <br> Zephyr, CA 95555<br>
      <br> 888-555-5555
      <br>
    </div>
  </main>
  <footer>
    Copyright &copy; 2020 Pacific Trails Resort<br>
    <a href="mailto:freed.nm@rhodesstate.edu">freed.nm@rhodesstate.edu</a>
  </footer>
</div>

Answer 1

据我了解，当屏幕尺寸大于 1024 像素时，您的图像不会出现。我对代码进行了一些更改，并让它按照你的意愿工作，我想......

我希望这就是你想要的

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Pacific Trails Resort</title>
    <!-- <link rel="stylesheet" href="pacific.css"> -->
    <meta charset="utf-8">
    <style>
        header {
            background-color: #002171;
            color: #FFFFFF;
            background-position: right;
            background-repeat: no-repeat;
        }

        header a:link {
            color: #FFFFFF;
            text-decoration-line: none;
        }

        header a:visited {
            color: #FFFFFF;
            text-decoration-line: none;
        }

        header a:hover {
            color: #90C7E3;
        }

        h1 {
            margin-top: 0;
            margin-bottom: 0;
            text-align: center;
            font-family: Georgia, serif;
            letter-spacing: 0.25em;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
        }

        * {
            box-sizing: border-box;
        }

        nav {
            font-weight: bold;
            font-size: 120%;
            padding: 0;
            text-align: center;
        }

        nav li {
            border-bottom: none;
        }

        nav a {
            text-decoration: none;
        }

        section {
            padding-left: 2em;
            padding-right: 2em;
        }

        h2 {
            color: #1976D2;
            font-family: Georgia, serif;
            text-shadow: 1px 1px 1px #CCCCCC;
        }

        h3 {
            color: #000033;
            font-family: Georgia, serif;
        }

        @media(min-width: 600px) {
            nav ul {
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                justify-content: space-around;
            }

            .content main {
                display: grid;
                grid-template-rows: auto;
                grid-template-columns: 1fr 1fr 1fr;
            }

            h2 {
                grid-row: 1 / 2;
                grid-column: 1 / 5;
            }

            section {
                grid-row: 2 / 3;
                grid-column: auto;
            }

            #special {
                grid-row: auto;
                grid-column: 1 / 5;
            }

            footer {
                grid-row: auto;
                grid-column: 1 / 5;
            }
        }

        @media(min-width: 1024px) {
            nav ul {
                flex-direction: column;
                padding-top: 1em;
            }

            nav {
                text-align: left;
                padding-left: 1em;
                padding-right: 1em;
                grid-row: 2/3;
                grid-column: 1/2;
            }

            main {
                grid-row: 2/3;
                grid-column: 2/3;
            }

            footer {
                grid-row: 3/4;
                grid-column: 2/4;
            }

            header {
                grid-row: 1/2;
                grid-column: 1/4;
            }

            #wrapper {
                margin: auto;
                width: 80%;
                border: #00008B;
                box-shadow: 1px 1px 1px;
                display: grid;
                grid-row: 3/3;
                grid-column: 2/2;
            }

        }


        }

        main ul {
            list-style-image: url('marker.gif');
            font-family: Georgia, serif;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding-left: 0;
            font-size: 1.2em;
        }

        nav a:link {
            color: #5C7FA3;
        }

        nav a:visited {
            color: #344873;
        }

        nav a:hover {
            color: #A52A2A;
        }

        body {
            font-family: Helvetica;
            background-color: #EAEAEA;
            color: #666666;
        }

        main {
            background-color: #90C7E3;
            padding-top: 1px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 30px;
            overflow: auto;
            display: block;

        }

        dt {
            color: #002171;
        }

        #wrapper {
            background-color: #90C7E3;
            background-image: linear-gradient(#FFFFFF, #90C7E3);
        }

        #homehero {
            height: 300px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        #yurthero {
            background-image: url('yurt.jpg');
            height: 300px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        #trailhero {
            background-image: url('trail.jpg');
            height: 300px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .resort {
            font-weight: bold;
            color: #1976D2;
        }

        footer {
            background-color: #EAEAEA;
            font-family: Georgia, serif;
            width: 100%;
            font-size: 75%;
            font-style: italic;
            text-align: center;
            padding: 22px;
        }

        #contact {
            font-size: 90%;
        }


        .details {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="wrapper">

        <header>
            <h1><a href="index.html">Pacific Trails Resort</a></h1>
        </header>

        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="yurts.html">Yurts</a></li>
                <li><a href="activities.html">Activities</a></li>
                <li><a href="reservations.html">Reservations</a></li>
            </ul>
        </nav>

        <div id="homehero">
            <img src="coast2.jpg" alt="Coast2 Image">
        </div>

        <hr>

        <div class="wrap">
            <main>
                <h2>Enjoy Nature in Luxury</h2>
                <p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the
                    California
                    North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a
                    sumptuously appointed private yurt and a cooked-to-order breakfast each morning.</p>
                <ul>
                    <li>Unwind in the heated outdoor pool and whirlpool</li>
                    <li>Explore the coast on your own or join our guided tours</li>
                    <li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
                    <li>Savor nightly fine dining with an ocean view</li>
                </ul>
                <div id="contact">
                    <span class="resort">Pacific Trails Resort</span><br>
                    12010 Pacific Trails Road <br>
                    Zephyr, CA 95555<br>
                    <br>
                    888-555-5555<br>
                </div>
            </main>
        </div>
        <!-- <footer>
            Copyright &copy; 2020 Pacific Trails Resort<br>
            <a href="mailto:freed.nm@rhodesstate.edu">freed.nm@rhodesstate.edu</a>
        </footer> -->

        <div class="details">
            <h2>Details</h2>
            <ul>
                <li>Dedicated</li>
                <li>Fast</li>
                <li>Secure</li>
            </ul>
            <br><br>
            <h2>Social Networks</h2>
            <ul>
                <li>Facebook</li>
                <li>Instagram</li>
                <li>Twitter</li>
            </ul>
            <br><br>
            <h2>Details</h2>
            <ul>
                <li>Dedicated</li>
                <li>Fast</li>
                <li>Secure</li>
            </ul>
            <br><br>
            <h2>Social Networks</h2>
            <ul>
                <li>Facebook</li>
                <li>Instagram</li>
                <li>Twitter</li>
            </ul>
            <br><br>

        </div>

    </div>

    <br><br>

    <footer>
        Copyright &copy; 2020 Pacific Trails Resort<br>
        <a href="mailto:freed.nm@rhodesstate.edu">freed.nm@rhodesstate.edu</a>
    </footer>


</body>

</html>

如果有任何问题请留下任何cmets，我想帮忙