Question

我有一个非常奇怪的问题。

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

Answer 1

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

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

到

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

CSS外部表不起作用，但它使用内联CSS时它工作

1 个答案: