本地背景图片不显示，但如果我用网络上的图片替换它，它确实有效

Question

这是我的 HTML 和 CSS https://codepen.io/anon/pen/YBmLJR

header{
    background-image: url(slike\header\header-ozadje.png);
    position: fixed;
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #E2B654;
}
#top-logo img{
    box-sizing: border-box;
    max-width: 100%; height: auto;
    padding: 5%;
}
nav{
    display: flex;
    justify-content: flex-end;
    flex: none;
    margin-right: 2%;
}
.nav-text{
    margin: 15px;
    flex: none;
}
.nav-text a{
    text-decoration: none;
    font: bold 16px/28px 'Open Sans', sans-serif;
    color: antiquewhite;
}
.nav-text a:hover{
    color: #DFB76B;
}

<header>
        <div id="top-logo">
            <img src="slike\logo\astroplanet-logo.png"> 
        </div>      
        <nav>
            <div class="nav-text"><a href="#">DOMOV</a></div>
            <div class="nav-text"><a href="#">DOMOV</a></div>
            <div class="nav-text"><a href="#">DOMOV</a></div>
            <div class="nav-text"><a href="#">DOMOV</a></div>
            <div class="nav-text"><a href="#">DOMOV</a></div>
        </nav>
    </header>

背景图片 link 到我的本地文件夹（我在 VSC 中复制了相对路径，所以它应该是正确的）在我的 header 中没有显示，但如果我将其替换为网络上的 URL。

如果你运行代码还有徽标，但应该有损坏的 link 图片。

感谢您的帮助！

Answer 1

尝试使用 .\slike\header\header-ozadje.png 或 \slike\header\header-ozadje.png 等相对路径。问题出在图像的路径上。

您的 html 文件应该在 slike 文件夹的父目录中。

如果您使用 windows，请使用“\”；如果 linux，请使用“/”。它应该有效。

Answer 2

在 css url

中使用斜线

background-image: url(slike/header/header-ozadje.png);

Answer 3

在必须放置斜杠的位置之前，您应该用这个替换您的图像位置背景图像：url(/slike/header/header-ozadje.png);

本地背景图片不显示，但如果我用网络上的图片替换它，它确实有效

Local background image doesn't show up, but if I replace it with one on the web it does work

html

css

local

background-image