html - 本地背景图片不显示,但如果我用网络上的一张替换它,它确实有效
问题描述
这是我的 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>
链接到我的本地文件夹的背景图像(我在 VSC 中复制了相对路径,所以它应该是正确的)在我的标题中没有显示,但如果我用网络上的 URL 替换它就会显示。
如果您运行代码,还有徽标,但应该有损坏的链接图像。
谢谢您的帮助!
解决方案
尝试使用相对路径,如.\slike\header\header-ozadje.png或\slike\header\header-ozadje.png。问题在于图像的路径。
您的 html 文件应位于 slike 文件夹的父目录中。
如果您使用的是 Windows,请使用“\”,如果您使用的是 linux,请使用“/”。它应该工作。
推荐阅读
- php - 使用 php 在 windows 中获取图像或视频的创建时间
- javascript - Openlayer,如何在不点击的情况下触发翻译
- azure - 有什么方法可以为我在 Azure 媒体服务中创建的所有资产输出使用相同的 blob 容器?
- c# - ASP.NET 上传的文件删除
- spartacus-storefront - 斯巴达克斯:如何在 PDP 上添加视频
- git - 视觉工作室中的 git
- java - Selenium 远程 Web 驱动程序未从给定的 Firefox 配置文件开始
- java - 尝试使用 java 实现 Azure AD 身份验证时出现异常
- html - 如何更改物化图标的活动颜色?
- nginx - 到 nginx 的入口 traefik