Question

StackOverflow中有关于此主题的类似问题，但没有一个问题能回答我的问题：

#header{
    border-bottom: 3px solid #87B825;
    background: #84E637 url("backg400.gif") repeat-x top left; **<!-- This background is not showing up -->**
}

所有文件都在同一目录中，不应该有任何文件路径问题。

下面是Dan Cederholm在他的“防弹网页设计”第2版第9章中采用的html和相关CSS源代码。

提前感谢您的帮助。

1）HTML源

<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>My Site</title>
<link href="mysite.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">
<h1> My Site</h1>
this is header
</div> <!--end #header -->

<p id="message">
<strong>This is my site</strong>
</p>


<div id="wrap">

<div id="content">
<div class="gutter">
... content goes here
</div> <!--end .gutter -->
</div>  <!--end #content  -->

<div id="sidebar">
<div class="gutter">
<p>... sidebar goes here </p>

</div>  <!--end .gutter -->
</div>  <!--end #sidebar -->

<div id="footer">
<p> Copyright &copy; 2015 My Site. All rights reserved</p>
</div>

</div>  <!--end #wrap -->

</body>
</html>

CSS源码（mysite.css）：

@charset "iso-8859-1";
    body {
    margin: 0;
    padding: 0;
    font-familly: Verdana, sans-serif;
    font-size: small;
    background: #fff;
}
<!-- Layout structure -->
#header{
    border-bottom: 3px solid #87B825;
    background: #84E637 url("backg400.gif") repeat-x top left; <!-- This one is not showing up -->
}
#header h1{ 
    margin: 0;
    padding: 25px;
    font-family: Georgia, serif;
    font-size: 150%;
    color: #374C0E;
    background: url("backg400.gif") no-repeat top left; <!-- This one is not showing up -->
 }
#wrap{
    background: url("backg400.gif")  repeat-y 80% 0; <!-- This one is showing up -->
 }
#content{
    float: left;
    width: 80%;
    font-size: 95%;
    line-height: 1.5em
    color: #333;
}
#sidebar{
    float: right;
    width: 20%;
}
#footer{
   clear: both;
   background: #828377;
}

Answer 1

您在样式表上使用HTML评论（）。从样式表中删除所有这些HTML注释，然后使用以下注释语法：

/** comment content */

注意： body规则中存在拼写错误：font-family而不是font-familly。

Answer 2

另外，请尝试使用W3C验证服务检查CSS语法：http://www.css-validator.org/#validate_by_input

HTML CSS：背景图像未显示

2 个答案: