我创建的页面似乎有问题。
我用 <style type="text/css>...</style> 在内部编写了 CSS 代码在该部分中，我添加了一个背景图片，然后继续编写我的 CSS。到目前为止，背景 img 正在运行。
在我剪切/粘贴 CSS 代码并从内部切换到外部样式表后，即 <link rel="stylesheet" type="text/css" href="main.css"/>并创建了一个 main.css 文件，我从浏览器(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-- */
最佳答案
您需要更新 CSS 文件中的图像文件夹路径，使其与 CSS 文件路径相对应
这样试试
#pageBody {
background: url('../img/pageBg.png') no-repeat;
.
.
}
或者
您可以简单地将 CSS 文件放在 HTML 文件旁边，而不是放在新文件夹中
关于html - 更改外部 SS 后背景消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18549522/