更改外部SS后背景消失

时间：2013-08-31 15:06:52

标签： html css background external

我创建的网页似乎存在问题。

我在内部使用<style type="text/css>...</style>编写了CSS代码，我添加了背景图片，然后我继续编写CSS代码。到目前为止，背景img正在发挥作用。

剪切/粘贴CSS代码并从内部切换到外部样式表 <link rel="stylesheet" type="text/css" href="main.css"/>并创建 main.css < / em>文件，我从浏览器得到了惊人的回应（Chrome v.29和Firefox v.23）：

我的背景图片以及我在页面中创建的所有已分配图片的图片都消失了！

所以我的页面只留下了文字和按钮......

以下是代码：

HTML 

    <!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" />
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<title>Hotel Prague</title>
</head>
<body>
<div id="pageBody">
<!-- ** HEADER ** -->
    <div id="header">
    <img src="img/logo.png" alt="Logo" class="logo"/>
  <form action="" method="get" name="Search">
        <input type="search" value="Search our site..." />
        <input type="image" value="image" src="img/searchImg.png" />
    </form>
    </div>
<!-- END HEADER -->

<!-- ** NAVIGATION MENU ** -->    
    <nav>
        <table>
            <tr>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
                <td class="menuSep"></td>
                <td class="menuItem"><a href="">Menu Link</a></td>
        </table>    
    </nav>
<!-- END NAV MENU -->

<!-- ** CONTENT ** -->    
    <div id="content">
        <aside>
            <div class="box1"><h3>PRAGUE</h3>
                        <h3>TODAY TRIPS</h3>

                        <img src="img/tripsPic.png" alt="images"/>

                        <div class="tripText"><h4>Charles Bridge trip</h4>
                        <p>Phasellus at tellus nec velit vestibulum dapibus vestibulum et sapien. Sed eu ipsum risus. Aenean iaculis, lacus non scelerisque hendrerit, </p></div></div>

        <div class="box2">
            <h3>ROOM RESERVATION <span class="green">ONLINE</span></h3>

            <p>Current free rooms:</p>

            <img src="img/reservationPic1.png">
            <p>Fusce imperdiet enim ac dui imperdiet, eget fermentum lorem scelerisque.</p>
            <input type="submit" value="Reserve" name="Reserve">


            <img src="img/reservationPic2.png">
            <p>Integer eu neque quis mi rutrum tristique.</p>
            <input type="submit" value="Reserve" name="Reserve">


            <img src="img/reservationPic3.png">
            <p>Maecenas nec est vel magna placerat posuere at ac nulla.</p>
            <input type="submit" value="Reserve" name="Reserve">
        </div>

        <article>
            <h1>HEADLINE</h1>
            <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et ligula sagittis, accumsan massa fermentum, lobortis quam. Sed semper magna in augue viverra commodo. Nam eget tristique est, eget suscipit lacus. Morbi volutpat nibh a eros dapibus gravida. Phasellus ut lacus pharetra, adipiscing nunc et, sodales justo. Integer convallis, nisi tempor ultricies pharetra, mi massa pharetra enim, sed varius odio arcu eu mauris. Suspendisse tellus elit, lacinia sed nunc et, porttitor vehicula lorem. Etiam viverra risus interdum enim blandit viverra. Nullam nec enim eros. Integer condimentum malesuada mi ut condimentum. Aliquam erat volutpat. Donec adipiscing ultrices vehicula. Aliquam erat volutpat.</p>

<p>Quisque condimentum nisl vitae laoreet pellentesque. Nullam in nisi vitae felis ultrices ullamcorper et quis purus. Suspendisse pretium rutrum enim, ut volutpat justo auctor eget. Nulla ut scelerisque mi. In viverra varius augue, in mollis ante euismod a. Duis in lacinia lacus, sit amet pharetra sapien. Proin sed lectus tortor. Ut ultrices urna ac placerat mollis. Curabitur molestie neque vel rutrum pulvinar. Ut sed massa condimentum, condimentum ante ac, pharetra odio. Sed augue ipsum, sagittis ut lobortis sed, commodo at lectus. Nam consequat ligula in mollis consequat.</p>

<p>Morbi nibh arcu, porttitor pellentesque massa eget, convallis aliquet massa. Nulla quis felis ante. Donec eu dui elit. Ut pretium lorem in risus feugiat porta. Aenean euismod eros id dictum consectetur. Curabitur bibendum augue vel tortor bibendum bibendum. Vivamus enim ante, egestas at enim nec, vehicula gravida nisi. Aliquam sit amet pretium lectus. Proin eget gravida felis, ut vehicula purus. Integer quis sem in odio pretium egestas. Praesent interdum risus quis ante dictum facilisis. Phasellus et cursus nisl.</p>

<p>Aenean dignissim nisi non arcu fermentum, ut ultricies nibh eleifend. Quisque non dignissim orci. Fusce congue semper diam elementum euismod. Donec aliquet eu justo at scelerisque. Quisque vel quam vel nisl tincidunt elementum eget ut leo. Nunc et leo vel arcu ultrices tempus eget ut tellus. Morbi laoreet suscipit scelerisque. Donec tempor tortor sapien, ut lacinia dui mattis egestas. Morbi et libero ac justo vestibulum venenatis eget mattis ante. Vivamus volutpat dictum purus eget consequat.</p>

<p>Nulla mattis aliquet tincidunt. Aliquam tellus velit, sodales ut nunc eu, mollis tempus tortor. Suspendisse viverra enim risus, ac accumsan dui placerat ut. Curabitur dapibus eget magna vitae varius. Praesent nec molestie metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius dolor et ornare dignissim. Nunc dignissim malesuada pretium. </p>
        </article>
    </div>
<!-- END CONTENT -->

<!-- ** FOOTER ** -->    
    <div id="footer">
    </div>
<!-- END FOOTER -->    
</div>
</body>
</html>

CSS 

/* CSS Document */
/*
BACKGROUND (pic and font)
*/
body {
    background: url('img/wallpaper.png') no-repeat scroll center;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 66px;
    margin-right: 66px;
}

/* THE PAGE BODY */
#pageBody {
    background: url('img/pageBg.png') no-repeat;
    width: 913px;
    margin: 0 auto;
}

/* THE LOGO */
#pageBody #header .logo {
    padding: 46px 629px 22px 50px;
}

/*** THE FORM AND IT'S INPUTS ***/
#header {
    position: relative;
}

#header form input[type="search"] {
    background: url('img/searchBgWide.png') center repeat-x;
    border: none;
    width: 282px;
    height: 34px;
    padding-left: 10px;
    font-weight: bold;
    font-style: italic;
    position: absolute;
    top: 18px;
    right: 59px;    
}

#header form {
    position: absolute;
    top: 45px;
    right: 45px;
}

/*** THE NAVIGATION MENU ***/
nav table {
    width: 100%;
    height: 51px;
    border-collapse: collapse;
}


nav table tr .menuItem {
    line-height: 51px;
    background: url('img/MenuBg.png');
    text-align: center;
}

nav table tr .menuSep {
    background: url('img/MenuSeparator.png');
    width: 5px;
    height: 51px;
}

nav table tr a {
    text-decoration: none;
    color: #ececec;
    font-weight: bold;
    font-size: 91%;
}
/* --END OF NAVIGATION MENU-- */

/* **CONTENT** */
#content {
    position: relative;
}
    /* SIDEBAR no.1 */
#content aside .box1 {
    width: 234px;
    height: 228px;
    background: url('img/tripsBg.png') no-repeat;
    padding: 17px 0 0 16px;
    margin: 31px 0 20px 31px;
    line-height: 0.9;
    position: relative;
}

    #content aside .box1 .tripText {
        position: absolute;
        top: 50px;
        right: 0;
        width: 135px;
        padding: 0 37px 33px 10px;
        color: #fff;
    }

    /* Font styles & sizes */
    #content aside .box1 h3 {
        font-size: 90%;
    }

    #content aside .box1 h3:first-of-type {
        color: #fff;
        opacity: 0.8;
    }

    #content aside .box1 h3:last-of-type {
        color: #c07644;
        opacity: 0.8;
    }

    #content aside .box1 .tripText {
        font-size: 90%;
    }
    #content aside .box1 .tripText h4 {
        color: #ff9127;
    }
    /* --END OF FONT STYLES-- */

    /* SIDEBAR no.2 */
#content aside .box2 {
    width: 234px;
    height: 228px;
    background-color: #5b8e1b;
    padding: 17px 0 0 16px;
    margin: 31px 0 20px 31px;
    line-height: 0.9;
    position: relative;
    border-radius: 5px 5px;
}

#content aside .box2 h3 {
    font-size: 90%;
}

/* --END OF SIDE BAR-- */

/* **Article section** */
article {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 590px;
    color: #e9e9e9;
}

#content aside article p {
    font-size: 80%;
}

/* --END OF ARTICLE SECTION-- */

/* **Footer section** */




/* --END OF FOOTER-- */

1 个答案:

答案 0 :(得分：1)

您需要更新CSS文件中的图像文件夹路径，以便它可以对应CSS文件路径

尝试这样

 #pageBody {
    background: url('../img/pageBg.png') no-repeat;
    .
    .
 }

或

你可以简单地将CSS文件放在HTML文件旁边，而不是放在新文件夹中

相关问题
最新问题