Question

经过几年的休息后，我又回到了网页设计中，所以我之前定期使用的很多提示和技巧似乎都没有用。我正在为我的魔兽世界公会设计一个公会网站进行一些练习，但是我遇到了让div背景图像在页面上正确显示的问题。

该页面包含一个容器DIV，一个标题DIV，一个菜单DIV和一个三列布局，当然还有一个页脚div。在菜单上方，我有一点艺术背景，我怀疑，我设法让那一个出现;但是，我无法正确显示左侧或右侧条形图上方的正确图像。我已经在网上搜索了一下，我仍然对我做错了什么感到茫然。这是我希望布局看起来像的屏幕截图：http://s19.postimage.org/7svzmuaf7/Layout_V2.jpg

目前，这是我在任何主要浏览器中访问网站时获得的内容：http://cirquedufreak.net78.net/

两者之间显然存在一些差异，因为一个只是一个jpg，另一个是css / html组合，我知道。感谢您提供的任何帮助。

源代码：

的index.php：

<?php
session_start();
include("wowarmoryapi/BattlenetArmory.class.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home - Cirque du Freak of Vashj</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>

<body>
<div id="container">
    <div id="header">&nbsp;</div>
    <div id="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Roster</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Books</a></li>
        </ul>
    </div>
    <div id="leftbar">LEFTBAR</div>
    <div id="content">
        <div id="gmod">
            <h1>Important Message</h1>
            <p>This is where any "breaking news" or important information that you want to give to the players will be displayed.</p>
        </div>
    </div>
    <div id="rightbar">
        <p>For an invitation, contact one of the following players in game:</p>
        <?php

        ?>
    </div>
    <div id="footer">&copy;2012 Cirque du Freak Guild of Vashj; All Rights Reserved.<br />World of Warcraft and related images and materials are &copy; Blizzard Entertainment.</div>
</div>
</body>
</html>

layout.css中：

@charset "utf-8";
/* CSS Document */

/* CSS LAYOUT BEGIN */
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #FC3;
    text-align: center;
}
div#container {
    margin: 0 auto;
    text-align: left;
    width: 1024px;
    height: auto;
}
div#header {
    width: 1024px;
    height: 147px;
    background: url(images/v2_header.png);
}
div#menu {
    width:1024px;
    height: 70px;
    text-align:center;
    background: url(images/v2_menuBG.png);
}
div#leftbar {
    float: left;
    width: 170px;
    height: 525px;
    min-heigh: 150px;
    background-image: url(images/v2_barBG.png) no-repeat;
    display: inline-block;
    background-position: top left;
}
div#content {
    float: left;
    width: 684px;
    min-height: 50px;
    height: 525px;
}
div#rightbar {
    float: right;
    width: 170px;
    height: 525px;
    min-height: 50px;
    background-image: url(images/v2_barBG.png) no-repeat;
}
div#footer {
    width: 1024px;
    height: 50px;
    text-align: center;
    clear: both;
}
/* CSS LAYOUT END */

/* CSS MENU BEGIN */
#menu ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    width: 1024px;
}

#menu ul li {
    display: inline;
}

#menu ul li a {
    float: left;
    text-decoration: none;
    padding: 10.5px 11px;
    width: 140px;
    color: #FF0;
    font-weight: bold;
    font-size: 24px;
    background-color: transparent;
    vertical-align: text-bottom;
}
#menu ul li a:visited {
    color: #FF0;
}
#menu ul li a:hover, #menu ul li .current {
    color: #F00;
    text-decoration: underline;
    background-color: transparent;
}
/* CSS MENU END */

/* LEFT BAR CSS BEGIN */

/* LEFT BAR CSS END */

/* CONTENT BOX CSS BEGIN */
#content div#gmod {
    width: 500px;
    height: 150px;
    text-align: center;
    border: #FFF 3px solid;
    background-color: #000;
    margin: 0 auto;
    color: #FFF;
    overflow-style: auto;
    overflow: scroll;
    overflow-x: hidden;
    padding-left: 4px;
    padding-right: 4px;
}
#content div#gmod h1 {
    text-align: center;
    color: #F00;
    font-size: 24px;
    font-weight: bold;
    text-decoration: underline;
    padding: 0px 5px;
/* CONTENT BOX CSS END */

/* RIGHT BAR CSS BEGIN */

/* RIGHT BAR CSS END */

/* FOOTER CSS BEGIN */
#footer {
    color: #999;
    text-align: center;
}
/* FOOTER CSS END */

非常感谢你花时间协助我解决这个问题。

Answer 1

不要使用

background-image: url(images/v2_barBG.png) no-repeat;

但

background: url(images/v2_barBG.png) no-repeat;

Answer 2

background-image: url(images/v2_barBG.png) no-repeat;应为background-image: url(images/v2_barBG.png); background-repeat: no-repeat;

Answer 3

background-image: url(images/v2_barBG.png) no-repeat;＆lt; - no-repeat应该像这样单独声明：background-repeat: no-repeat;

CSS背景不显示

3 个答案: