我的第一个网页作业遇到了麻烦，我才第一年，之前没有任何经验。我的问题是，当我尝试将背景 img 应用于 body 时，它会在头部应用一个简单的样式集，但是当我在我的 css 中应用相同的代码时它会失败，我不知道为什么会这样正在失败。我有
请有人尝试以一种简单的方式解释为什么它在我的 css 中不起作用。谢谢
<!DOCTYPE html>
<!--
edwin martin
05/10/2015
V1
-->
<html lang="en">
<head>
<title>Index</title>
<!-- ensures the document is using the correct char set -->
<meta charset="utf-8">
<meta name="description" content="Edwins index">
<link rel="stylesheet" href="styles/indexstyles.css">
<!--
The below section looks like a comment, but it's a conditional include statement.
It's ignored by all browsers except IE9. html5shiv is a library that fixes some HTML5
IE bugs.
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body
{background-image: url("images/html.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
padding-right:10px;
background-size:cover;}
</style>
</head>
<body>
<div id="page">
<div id="nav">
<nav>
<h3> Nav</h3>
<ul>
<li><a href="learning_log.html">laearning_log</a></li>
<li><a href="session2/timetable2.html">Contact</a></li>
</ul>
</nav>
</div>
<div id="wrapper">
<div id="head">
<header id="headcolor">
<div id="toplinks">
<ul>
<li id="tl"> <input type="button" name="b1" value="learning log" onclick="location.href='learning_log.html'"> </li>
<li id="tl"> <input type="button" name="b1" value="contact" onclick="location.href='contact.html'"> </li>
</ul>
</div> <br>
<br>
</header>
<h1 id="title"> Index </h1>
</div>
<div id="abme">
<h2>About me </h2>
<div id="content">
<img class="mesz" src="images/me.jpg" alt="me">
<p>My name is Edwin Martin and I am 25 years old, I live in fareham based in portsmouth. I currently am a student at solent University studying Computing.
I currently have a part time job in my family business maintaining student properties. My work ranges from tiling, Plumbing, Brick laying, Electrics,and many more.
Though it is not my only practice I also enjoy mechanics, mainly on Volvo engines and Kawasaki's and Husqvarna's.
My hobbies are vehicle maintainance, Motorcycling, and Computers building and gaming. </p>
</div>
</div>
<div id="abssu">
<h2>About Southampton Solent University </h2>
<div id="content">
<p>Southampton Solent University became a university in July of 2005. Incorporated as an independent higher education institution in 1989,
the University's origins can be traced back to a private School of Art founded in 1856.
Southampton Solent University became a university in July 2005 thou mergers between Southampton College of Art,
and the College of Technology and the College of Nautical Studies at Warsash,laid the foundations for what is now Southampton Solent University.
</div>
<img class="solpic" src="images/solent_logo.jpeg" alt="solent logo">
</div>
<div id="abit">
<h2>About Internet Technology </h2>
<div id="content">
<p>Internet Technology focus on the main aspect's of website development, Starting with basic webpage development such as displaying text and pictures, to more
advanced css giving the page detail. an example would be as simple as text color to defining pixel sizes. Other aspects of internet technology are javascript
and css3. These can give the page a dynamic feel like 3d pictures and animations. As a group these code languages build up the basic aspects of any webpage,
from amateur to a advance corporate webpage.It probably is the most useful subject of the 21st century</p>
</div>
<footer id="foot">
<p id="foottext"> edwin martin's index. v3.6.10/11/2015 </p>
</footer>
</div>
</div>
</div>
</body>
</html>
/** css **/
block {margin: 0 auto;}
ul { list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;}
a { display: block;
width: 120px;}
body { text-transform: capitalize;
font-family: arial, helvetica, sans-serif;
background-image: url("images/html.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;}
header { text-align:left;
background-color:black;
}
footer { text-align:center;
background-color:black;}
table, td, th { outline-style: solid;
outline-color: darkblue;
table-layout: auto;
}
td { padding: 15px;
padding-bottom:60px;}
h1 { font-size:40px;
text-align: center;
font-family:Courier New, Courier, monospace;}
h2 {text-decoration: underline;
text-align: center; }
h3 {text-align:center;
background-color:lightblue;
margin:0 0;}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
nav li {padding-bottom:10px;}
/** ID,s **/
#wt {width:200px;}
#table {height:auto;
display:block;
margin: 0 auto;}
#headcolor{background:darkblue;}
#tl { float:left;
padding-right:5px;
background-color:darkblue;}
#wrapper{ width:84%;
height:auto;
background-color:white;
float:left;
position:relative;
border-style: solid;
border-width: 10px;
border-color:darkblue;
border-radius: 25px;
box-shadow:1px 1px 2px black, 0 0 25px red, 0 0 10px darkred;
}
#abme { height:300px;
border-style: solid;
border-width: 5px;
border-color:darkblue;
position:relative;}
#abssu { height:400px;
border-style: solid;
border-width: 5px;
border-color:darkblue;
position:relative;}
#abit { height:300px;
border-style: solid;
border-width: 5px;
border-color:darkblue;
position:relative;}
#nav { width:10%;
background-color:white;
float:left;
margin-right:5px;
border-style: inset;
border-width: 6px;
border-color:darkblue;
border-radius: 10px;
box-shadow:1px 1px 2px black, 0 0 25px red, 0 0 5px darkred;
padding:5px;}
#page { width:1640px;
margin: 0 auto;
}
#head{height:80px;
border-style: solid;
border-width: 5px;
border-color:darkblue;
}
#foot2{
border-style: solid;
border-width: 5px;
border-color:darkblue;
}
#foot{ background:darkblue;
width:100%;
padding-top:10px;
position:absolute;
bottom:0;
left:0;
}
#toplinks {
list-style-type: none;
text-align:center;
float:right;
}
#title {margin: 0 auto;
text-shadow:3px 3px #AAA;}
#content {padding:10px;}
#foottext{color:white;
background:darkblue;
width:100%;
margin:0 auto;}
/** Classes **/
.solpic {display: block;
margin-left: auto;
margin-right: auto;}
.mesz { width: 100px;
height: 100px;
display:block;
float:left;
padding-right:8px;}
最佳答案
我试了几次才明白你的意思，是的，这都是因为 HTML 页面在根目录中，但 CSS 在文件夹中，所以我将它从
url("images/html.jpg");
到
background-image: url("../images/html.jpg"); .
关于html - 正文背景图片将应用于 HTML 头部，但不适用于我的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33656841/