【发布时间】：2014-12-15 22:55:22
【问题描述】：
当我更改了几个标题时，我主页的基础似乎已经完成。接下来我知道，顶部的横幅/背景图像以及位于其上方的徽标都消失了。
我很确定这是关于 CSS 的问题。但是，我看不到导致此问题的更改。任何帮助将不胜感激。
更新：在使用 HTML 图像而不是 CSS 之后，我现在恢复了背景图像。我将横幅上的 z-index 更改为 0，然后显示横幅。所以很自然地，我将标题（白框）设置为 z-index: 1，将徽标设置为 z-index: 2。
因此，如果它全部链接到 z-index，那么理论上我的徽标和标题框现在应该显示在横幅上方。然而，他们仍然失踪。
@fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
}
@fontface {
font-family: Swiszt
src: url(fonts/swist.ttf);
font-weight: thin;
}
body, html {
background-color: #d83030;
margin: 0;
padding: 0;
}
/* the first missing images is the background of the banner container below */
#container {
position: fixed;
top: 0px;
left: 0px;
background-image: url:"images/banner.jpg";
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
content: 60px;
padding: 0px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -3;
}
#header {
position: static;
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
height: 12%;
margin: auto;
z-index: 1;
}
/*as well as the logo that can be found in the HTML*/
#logo {
position: relative;
border: 0px;
margin-top: 9px;
z-index: 2;
}
#nav01 {
position: absolute;
background-color: #374754;
width: 100%;
height: 40px;
padding: 0px;
margin-left: 0px;
margin-top: 85px;
margin-right: 0px;
border-radius: 0px 0px 6px 6px
}
ul#menu {
font-family: "Swisz";
position: relative;
background-color: #374754;
padding: 0;
margin-top: 13px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
#overlay {
font-family: "Swisz";
position: relative;
margin-left: auto;
margin-right: auto;
top: 250px;
bottom: 200px;
width: 30%;
height: 30%;
background-color: #d83030;
padding: 15px 15px;
color: #ffffff;
border-radius: 8px 8px 8px 8px;
}
#info {
position: relative;
padding-left: 450px;
top: 410px;
}
body {
font-family: "Swisz", Helvetica;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 800px;
padding: 0;
width: 100%;
background-color: #d83030;
margin: 0;
}
h1 {
text-align: center;
font-size: 26pt;
}
h2 {
font: "Swiszt";
font-variant: "thin";
color: #ffffff;
text-align: center;
font-size: 14pt;
}
h4 {
font-family: Swisz;
color: #374754;
text-align: center;
}
h5 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 16px;
}
#sub {
position: relative;
color: #374754;
top: 920px;
background-color: #ffffff;
padding: 0;
margin: 0;
size: 40;
}
#hiddenbox {
position: relative;
width: 100%;
height: 298px;
background-image: url("hidden_bg.jpg");
background-repeat: repeat-x;
padding: 0;
margin: 0;
color: #ffffff;
}
p {
margin-left: 200px;
margin-right: 200px;
}
.pagedown {
position: relative;
width: 100%;
padding-top: 0;
margin: 0;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
margin-top: 100px;
}<!DOCTYPE html>
<html>
<head>
<title>SITE- This is our website</title>
<link href="Site.css" rel="stylesheet">
<script src="Script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
/* the logo is below*/
<img src="images/logo.png" alt="SITE" style="width: 321px; height: 72px"></img>
</div>
</div>
</div>
<nav id="nav01"></nav>
<div id="overlay">
<h1>SPECTACULAR BIG HEADING<h1>
<h2>THE FUTURE IS HERE</h2>
</div>
<div id="info">
<img src="seehow.png" alt="See How" style="width: 345px; height: 240px">
</div>
<div id="main">
<h1>WELCOME TO WEBSITE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at.</p>
<img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">
</div>
<div id="sub">
<div id="hiddenbox">
<br>
<br>
<p2>Open up new business avenues</p2>
<br>
<p2>Review your acquisitions</p2>
<br>
<p2>Monitor events</p2>
<img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>
</div>
<img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>
<h1> How It Works </h1>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>【问题讨论】：
-
看起来可能是这一行：
url:"images/banner.jpg"应该有像url("images/banner.jpg")这样的括号 -
我已经尝试过了，但仍然没有这样的运气。我很困惑为什么它也会影响徽标。不过感谢您的快速回复。