如何解决出于某种原因,我在 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> </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;
,它基本上将这个元素(及其所有子元素)隐藏在其后面父母。
尝试删除它,看看是否有帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。