HTML/CSS URL 路径答案

【问题标题】：HTML/CSS URL pathHTML/CSS URL 路径
【发布时间】：2015-08-18 05:25:50
【问题描述】：

[![在此处输入图像描述][1]][1]我试图寻找解决方案，但没有找到，所以我来到这里。这是我的 HTML 文件夹 http://i.stack.imgur.com/EzlU9.png

SITE/Fonts/school.ttf

网站/图片/praycat.jpg

网站/index.html

SITE/main.css

这是我的 CSS 文件

html { 
  background: url('Pictures/praycat.jpg') no-repeat center center fixed; 
  background-size: cover;
}

@font-face {
   font-family: myFirstFont;
   src: url('Fonts/school.ttf');
}

当我打开我的索引时，一切正常（访问图像和字体。但是，当我访问我的网站时，图像和字体都不见了。我做错了什么？

HTML 代码

<html>
<head>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--Let's load jQuery-->
<script>

function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode )
{
$("#mapName").text(mapname);
$("#gameMode").text(gamemode);
$("#serverName").text(servername);
}
</script>
</head>
<body>
<audio autoplay loop>
    <source src="somesoundfile.ogg" type="audio/ogg">
</audio>
</body>
<body>
<div>
<p class="small">
    <h1 id="titlePg"><b>You're on your way to <span id="serverName">unknown</span></b></h1>
</div>
</p>
We're currently playing <span id="mapName">unknown</span> on <span id="gameMode">unknown</span>
</body>

</html>

控制台： http://i.stack.imgur.com/yK5ji.png

【问题讨论】：

您是否正确链接了图像和字体文件
你用的是什么浏览器？
只需在浏览器中打开您的控制台并检查它显示的错误消息是什么，尝试修复该错误
将html 更改为body
嗯，我用微软边缘浏览器打开文件，我用firefox和chrome访问网站。

标签： html css url

【解决方案1】：

尝试在 URL 之前使用 ../，因为它代表您的根：

body{ 
  background: url('../Pictures/praycat.jpg') no-repeat center center fixed; 
  background-size: cover;
}

@font-face {
   font-family: myFirstFont;
   src: url('../Fonts/school.ttf');
}

【讨论】：

我使用 Dropbox 托管网站是否也有帮助？

【解决方案2】：

我注意到的一件事是你有两个头部标签

<head>
<head>
CSS link
</head>
</head>

尝试摆脱其中一个

<head>
CSS link
</head>

【讨论】：

那行不通。你能通过查看控制台找出问题所在吗？ i.stack.imgur.com/yK5ji.png

【解决方案3】：

首先，您需要将 HTML 标记更改为 Body。然后你需要设置根目录“..\无论你的文件存储在哪里\文件名”与最后的帖子一样，我们似乎都倾向于相同的答案。让我们知道这是否有效。如果不能，您也可以发布您的 html 代码，以便我们也可以在那里查看代码并提供帮助。祝你好运。

已更新这是我能够在 CSS 中修复的代码：

background-image: url("\\main Directory\User\Desktop\Pictures/praycat.png");

需要在背景后面加上“-image”，并在图片目录中使用双引号。我还去掉了图像源之后的措辞。这是您在上面的旧代码和我在下面使用的代码：

background: url('Pictures/praycat.jpg') no-repeat center center fixed;

background-image: url("\\main Directory\User\Desktop\Pictures/praycat.png");
This is found under html or body in CSS.

您需要更改目录以直接指向图片。您通常可以右键单击图像，单击属性，它应该就在您那里，以了解其存储位置。

【讨论】：

如何设置根目录？更改标签无效。
这是我设置的根目录，用于在我的网站上显示我过去在工作中使用的图片。 {}。根目录是存储所有信息的地方，并与网页上的调用过程相关。
如果您的所有网站和文件都存储在您的计算机上，则 html 将首先在与其自身相同的文件夹中查找文件。如果它们不在同一个文件夹中，那么您将获得照片的“x”img。这是您指向包含所需文件的文件夹的位置，然后指向末尾的文件名。和我上面贴的差不多。唯一的区别是我发布了我的图片所在位置的完整目录以及我想要显示的文件。

【解决方案4】：

您为什么不尝试使用"../" 开始您的路径可能会有所帮助

【讨论】：