CSS 外部工作表不工作，但当我使用内联 CSS 时它工作答案

【问题标题】：CSS External Sheet not working but it works when i use inline CSSCSS 外部工作表不工作，但当我使用内联 CSS 时它工作
【发布时间】：2014-09-23 08:10:52
【问题描述】：

我有一个很奇怪的问题。

我写了一个 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;
    }

【问题讨论】：

标签： html css

【解决方案1】：

图像的 url 是相对于 CSS 文件的，因为文件位于 css 目录中，您需要更改：

background-image:url('images/line.png');

到

background-image:url('../images/line.png');

【讨论】：