我有一个很奇怪的问题。
我写了一个HTML页面，它使用了一个外部CSS样式表。当它在外部样式表上时，背景图像属性不起作用，但是当我使用内部样式表时，它可以工作。是什么导致这种情况发生？我应用的所有CSS属性都可以正常工作。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title> Burger and Chips </title>
<link rel="stylesheet" type="text/css" href="css/style.css"/> <!-- CSS Section-->
<style type="text/css">
body{
background-color:#34b0bf;
font-family:Tahoma;
background-image:url('images/line.png');
background-position:top;
background-repeat:repeat-x;
background-attachment:fixed;
}
</style>
</head>
<body> <!-- The Content Section-->
<table class="center">
<tr>
<td><img src='images/240px-Wikimedia-logo.png' alt=''/></td>
<td><h1> Wikimedia Logo </h1>
<td><img src='images/240px-Wikimedia-logo.png' alt=''/></td>
</tr>
</table>
<h1 class="pgtitle"> Best burgers in Leicester !! </h1>
<br>
<br>
<br>
<div class='center' id='container'>
<div id="menubutton" class="auto-style1">
<a class='button' href='page2.html'>Page 2</a>
<a class='button' href='page3.html'>Page 3</a>
</div>
<img class='left' src='images/inkjet-printer.png' width ='150' height= '150' alt=''>
<p class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed bibendum ipsum, eu tristique magna. Etiam ac tortor dictum,
semper libero vel, posuere metus. Proin sit amet urna diam. Vivamus turpis enim, maximus vitae consequat id, mollis eu justo. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Donec placerat nisi quis feugiat accumsan. Pellentesque sed purus tempor tellus euismod
ultrices. Praesent condimentum erat ante, commodo finibus orci condimentum vitae. Cras vel nisl ullamcorper ligula egestas elementum id nec nibh.
Nulla quis turpis in purus dignissim tincidunt. Vivamus commodo non eros quis sollicitudin. Sed vestibulum, metus vel fringilla aliquam, tellus
libero imperdiet nunc, quis pretium neque lacus volutpat turpis. Proin quis arcu arcu. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae</p>
</div>
</body>
<!-- Made by Mahamed Ali-->
</html>
这是我上面使用的CSS样式表：
/* My CSS Stylesheet
Mahamed Ali
*/
a.button {
border:3px solid #ccff33 ;
padding:3px 10px 3px 10px;
background-color:#ffffff;
color:#990000;
margin:10px;
font-family:Tahoma;
}
a.button:hover{
background-color:#990000;
color:#000033;
}
body{
background-color:#34b0bf;
font-family:Tahoma;
background-image:url('images/line.png');
background-position:top;
background-repeat:repeat-x;
background-attachment:fixed;
}
#container {
width:800px;
border:2px solid black;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#005A31;
}
.center{
margin-left:auto;
margin-right:auto;
}
div.dcenter{
width: 300px;
height: 0px;
margin: auto;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
h1.pgtitle{
font-family:Tahoma;
color:#ffff00;
text-align:center;
}
img.left{
float:left;
margin-right:10px;
}
img.right{
float:right;
margin-right:10px;
}
marquee{
font-family:Tahoma;
color:#ffff00;
width:50%;
}
#menubutton{
margin-left:auto;
margin-right:auto;
}
p{
font-family:Tahoma;
color:#00FF00;
}
table{
padding:10px;
border:1px;
}
td {
padding: 15px;
}
.auto-style1 {
text-align: center;
}
.auto-style2 {
border: 10px solid #000000;
}
图片的网址是相对于CSS文件的，因为该文件位于css目录中，因此您需要进行以下更改：
background-image:url('images/line.png');
到
background-image:url('../images/line.png');
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句