出于某种原因，我在 div 中的图像没有显示出来，它只是空的我可以在浏览器的 F12 中看到它的假定图像的轮廓

如何解决出于某种原因，我在 div 中的图像没有显示出来，它只是空的我可以在浏览器的 F12 中看到它的假定图像的轮廓

这个特定问题与 div（网格区域）“.item2”内的图像有关。我可以看到图像应该在浏览器的 F12 模式下出现，但它没有实际上出现。它只是黑色，或空白。 As you can see here,the outline shows where the image supposedly is。我希望图像完全包含在灵活的 (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;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'main main main main main'
    'main main main main main'
    'footer footer footer footer footer';
  grid-gap: 2px;
  background-color: black;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

table,th {
    background-color: black;
    height: 8vh;
}

table {
    table-layout: fixed;
    width: 100%;
    vertical-align: middle;
    margin: 0 auto;
    position: absolute;
    top: 40px;
}

.has-dropdown {
    position: relative;
}

.has-dropdown:hover > .dropdown {
    display: block;
}

.dropdown {
    width: 240px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: -58px;
    overflow-y: auto;
    max-height: 200px;
    border: 0px solid white;
    display: none;
    text-align: left;
    background-color: #222222;
    font-family: Lane;
    overflow: hidden;
    font-size: 24px;
    text-indent: 4px;
}
.dropdown a {
    color: white;
}
.dropdown div:hover {
    background-color: #444444;
}

#BackgroundVideo {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    min-width: 100%;
    max-width: 100%;
    z-index: 0;
}
.logo {
  width:20%;
  display:block;
  position:absolute;
  left:0;
  right:0;
  top: 0;
  margin:auto;
  z-index: 3;
  background-color: transparent;
  pointer-events: none;
      -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,Opera and Firefox */
}

.ctext {
    font-size: 11px;
    line-height: 80%;
    vertical-align: middle;
    color: white;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.largeimg {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

<!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">(Erik Granlund)</span>
    </div>
</div>

</body>
</html>

解决方法

不幸的是，仅使用提供的代码片段很难重现该问题，但我的猜测是：在您的 CSS 中，item2 中有 z-index: -1;，它基本上将这个元素（及其所有子元素）隐藏在其后面父母。尝试删除它，看看是否有帮助