我的第一个网页分配遇到了麻烦，我只是在我没有经验的第一年。我的问题是，当我尝试将背景img应用到正文时，它将应用于头部中的简单样式集，但是当我在我的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;}
答案 0 :(得分：1)
我花了一些时间来了解你的意思，是的，这完全归功于HTML页面在根目录中，但CSS在一个文件夹中，所以我从
url("images/html.jpg");
到
background-image: url("../images/html.jpg"); .
答案 1 :(得分：0)
检查您是否正确包含了css文件。
或者，如果正确包含css文件，并且它位于像＆＃39; css＆＃39;这样的文件夹中。或者＆＃39;资产＆＃39;将您的css代码从background-image: url("images/html.jpg");更改为background-image: url("../images/html.jpg");
希望这会有所帮助
答案 2 :(得分：0)
一个非常可靠的答案就是你的目录。正在从你的样式目录/ images / html.jpg中加载一个图像，并从你的php文件（在这里假设它的php，但你得到漂移）/images/html.jpg。 尝试使用../
上传文件夹url("../../images/html.jpg");
根据需要多次，并添加查找实际图像文件所需的任何额外文件夹
在chrome中，如果右键单击页面上的任何位置并执行检查元素，您将看到尝试加载文件的路径（在错误日志中）
答案 3 :(得分：0)
将图像的扩展名更改为PNG。我知道这听起来很奇怪，但我也遇到了类似的问题，它对我有用