HTML中由于某种原因,我在div内的image没有显示,只显示了空白的背景。我可以在浏览器用F12调试可以看到图片的轮廓。此特定问题与div(网格区域)“。item2”内部的图像有关。我可以看到的图像应该是存在于浏览器的F12的模式,但它并没有真正出现。它只是黑色或空白。如您在此处看到的,轮廓线显示了图像应该位于的位置。我希望图像完全包含在灵活的(vh)div中,这似乎可以做到,只是没有出现。

@charset "utf-8";
/* CSS Document */
* {
    padding: 0;
    margin: 0;
}
@font-face {
    font-family: Kiona Regular;
    src: url('Kiona-Regular.ttf');
} 
.junebug {
    font-family: Kiona Regular;
    font-size: 4.2em;
}

@font-face {
    font-family: Lane;
    src: url('LANENAR_.ttf');
}

.item1 {
    grid-area: header;
    height: 8vh;
    background-color: black;
    font-family: Kiona Regular;
    text-align: center;
    color: white;
    align-self: center;
    vertical-align: middle;
    cursor:default;
    z-index: 2;
      -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.title-text {
    text-shadow: 0 0 4px white;
    transition-property: text-shadow;
    transition-duration: 1s;
}

.title-text:hover {
    text-shadow: 0 0 11px white, 0 0 11px white;
}

.item2 {
    grid-area: main;
    background-color: 0;
    height: 76.2vh;
    align-content: center;
    align-self: center;
    vertical-align: middle;
    z-index: -1;
}
.item3 {
    grid-area: footer;
    height: 3vh;
    background-color: black;
    z-index: 2;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    line-height: 30%;
    opacity: 0.68;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pragerio</title>
<link href="Fera1.css" rel="stylesheet" type="text/css">
<link href="TheBigProject2.js" type="text/javascript">
</head>
<body>
<img class="logo" src="Pragerio Logo.svg" height="211px" id="PragerioLogo" alt="Pragerio Logo">
<div class="grid-container">
  <div class="item1">
     <table readonly>
    <tr>
    <th class="has-dropdown">
        <span class="title-text">FERA</span>
        <div class="dropdown">
            <a href="#"><div>About</div></a>
            <a href="#"><div>Compare</div></a>
        </div>
        </th>
    <th class="has-dropdown">
        <span class="title-text">SENSAÇÃO</span>
        <div class="dropdown">
            <a href="#"><div>About</div></a>
            <a href="#"><div>Compare</div></a>
        </div>
        </th>
    <th>&nbsp;</th>
    <th class="has-dropdown">
        <span class="title-text">PRESS</span>
        <div class="dropdown">
            <a href="#"><div>News</div></a>
            <a href="#"><div>Visits</div></a>
        </div>
        </th>
    <th class="has-dropdown">
        <span class="title-text">ABOUT</span>
        <div class="dropdown">
            <a href="#"><div>Heritage</div></a>
            <a href="#"><div>Contact</div></a>
        </div>
        </th>
  </tr>
      </table>
         </div>
    <div class="item2"><img class="largeimg" src="HiResPhoto180.png" alt="Image"></div>
  <div class="item3">
    <span class="ctext">Attention</span><br>
    <span class="ctext">2021 © Pragerio, Ltda. and Partners</span><br>
    <span class="ctext">(Name Nameson)</span>
    </div>
</div>

</body>
</html>
不幸的是,仅使用提供的代码段很难重现该问题,但我的猜测是:在CSSz-index: -1;中的item2中,该元素(及其所有子元素)基本上都隐藏在其父元素的后面。尝试将其删除,看看是否有帮助