gpt4 book ai didi

html - 背景图片不会显示

转载 作者:太空宇宙 更新时间:2023-11-04 16:01:52 25 4
gpt4 key购买 nike

下面是我的侧边栏的 HTML 和 CSS 代码。

<div id="sidebar">
<header>
<h3 class="site-title">The Code Stitchery</h3>
</header>
<nav>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

CSS

nav a {
background: url(/Images/tape_measure_unit.png) no-repeat;
display: block;
padding: 2px 4px;
text-align: center;
width: 256px;
height: 36px;
}

背景图像在 Eclipse 的网页编辑器中显示得很好,但是当我在网络浏览器中打开同一页面时,只显示文本。我尝试了其他一些帖子的建议,包括:

但我还是很困惑。

这是侧边栏在 Eclipse 的网页编辑器中的样子: A screenshot of the offending page

这是它在 Mozilla Firefox 中的样子: enter image description here

有什么技巧可以让图片正常显示吗?

最佳答案

当您从浏览器访问您的 home.html 文件时,您在图像的 URL 中使用了绝对路径 (/Images/tape_measure_unit.png),该路径成为驱动器盘符的绝对路径:file:///C:/Images/tape_measure_unit.png。我不认为你的形象存在于那里,是吗?

使图像的路径相对于 CSS 文件(如果没有 HTML 文件)的位置。例如:

     background: url(../Images/tape_measure_unit.png) no-repeat; 
/**NOTE THE PERIOD BEFORE THE SLASH.**/

请注意,一旦您将所有这些部署到 Web 服务器,绝对路径可能就有意义了。例如,如果您的 Web 服务器的根路径对应于您的本地 codestitchery 文件夹,那么您的图像路径将起作用。

关于html - 背景图片不会显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9712775/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com