Question

我构建了一个HTML5页面，图像覆盖整个页面中的背景颜色。我试图使图像显示在背景中，而背景颜色显示在背景顶部的页面中。复制并粘贴我的代码以便自己查看。我该如何解决？提前谢谢。

这是索引文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="javajam.css">
    <title>JavaJam Coffee House</title>
    <meta charset="utf-8">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
<div id="wrapper">

<h1><img src="javalogo.gif" alt="JavaJam Logo" width="619" height="117"></h1>

<div id="nav">
    <a href="index.html">Home</a>&nbsp;
    <a href="menu.html">Menu</a>&nbsp;
    <a href="music.html">Music</a>&nbsp;
    <a href="jobs.html">Jobs</a>
</div>

<div id="content">

<img src="windingroad.jpg" alt="Winding Road" width="333" height="156" align="right">

<ul>
    <li>Specialty Coffee and Tea</li>
    <li>Bagels, Muffins, and Organic Snacks</li>
    <li>Music and Poetry Readings</li>
    <li>Open Mic Night</li>
</ul>

<div>
    12312 Main Street<br>
    Mountain Home, CA 93923<br>
    1-888-555-5555
</div>

<br>
</div>
<div id="footer">
    Copyright &copy; 2013 JavaJam Coffee House<br>
    <a href="mailto:zhawkins9468@gmail.com">zhawkins9468@gmail.com</a>
</div>
</div>
</body>
</html>

这就是CSS：

body { background-color: #FFFFCC;
      color: #330000;
      font-family: Verdana, Arial, sans-serif; 
      background-image: url(background.gif); }

h1 { background-color: #CCAA66;
    color: #000000;
    text-align: center; }

h2 { background-color: #CCAA66;
    font-size: 1.2em;
    padding-left: 10px;
    padding-bottom: 5px; }

img { border: none; }

#nav { text-align: center; }

#footer { background-color: #CCAA66;
         color: #000000;
         font-size: .60em;
         font-style: italic;
         text-align: center; 
         padding: 10px; }

#wrapper { background-color: ffffcc;
           width: 80%;
           margin-left: auto;
           margin-right: auto; 
           min-width: 700px; 
           -webkit-box-shadow: 5px 5px 5px #1e1e1e; 
           -moz-box-shadow: 5px 5px 5px #1e1e1e;
           box-shadow: 5px 5px 5px #1e1e1e; }

#content { padding: 25px; }

.details { padding-left: 20%; 
           padding-right: 20%; }

Answer 1

在您提供的代码中，Chrome的Inspector会在div #wrapper中将“ffffcc”报告为背景颜色的无效属性值。

在“ffffcc”前添加“＃”会使背景颜色有效，这会使其正确显示而不是正文背景图像。很抱歉，如果这不能解决问题，但为了以防万一，值得一试。

Answer 2

我在你的代码中发现了一个拼写错误。你有：

#wrapper { background-color: FFFFCC; }

应该是：

#wrapper { background-color: #FFFFCC; }

CSS背景颜色不显示

2 个答案: