Question

当我改变几个标题时，我的主页的基础似乎已经完成。接下来我知道，顶部的横幅/背景图像以及位于其上方的徽标已经消失。

我很确定这是关于CSS的问题。然而，我无法看到我所改变的导致了这个问题。任何帮助将不胜感激。

更新：在使用HTML图片而不是CSS之后，我现在已经获得了背景图片。我将横幅上的z-index更改为0，然后显示横幅。所以我自然将标题（白框）作为z-index：1，将徽标作为z-index：2。

因此，如果它全部链接到z-index，那么理论上我的徽标和标题框现在应显示在横幅上方。然而，他们仍然缺席。

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您的代码：

background-image: url:"images/banner.jpg";

正确的代码：

background-image: url("images/banner.jpg");

图像在CSS中消失。背景＆amp;商标

1 个答案: