在外部样式表中使用背景图片时无法使用，在html中使用<style>标签时完全正常。

问题描述 投票：0回答：1

HTML代码:(图片存在于正确的目录中)

    <html lang="en-US">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles/style.css">     
</head>
<body>
    <header>
        <h1>Sample Header</h1>
    </header>
    <main>
        <article>
            <h2>Sample Header 2</h2>
            <p>Sample Paragraph 1</p>        
            <p>Sample Paragraph 2</p>
        </article>
    </main>
</body>

在上面的表格中，CSS代码:

html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}

background-image在上面的表格中不工作，但是当样式标签中包含同样的CSS代码时，background-image工作得很好，为什么在外部样式表中不工作？

background-image
1个回答
0
投票

我想这是一个路径问题 background-image: url(...). 由于缺乏资料，我暂时无法重现，但请注意你的文件夹结构。当你使用 <style> 对于CSS来说，相对路径的起始点是你的根目录（或者HTML所在的位置）。

如果是 style.css 起点是文件夹 styles. 所以请注意，在这种情况下，路径可能要改变。你可以使用 火狐开发工具 或 浏览器开发工具 来修改你的路径。这样你就可以很容易地找到路径问题的源头，或者如果是 background-image 规则在你的元素上被正确应用。

更新了。 增加了开发者工具的链接 (Mozilla, Google)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.