如何正确地插入CSS到HTML与绝对路径，使图片从CSS的工作？

v64noz0r 于 2023-01-06 发布在其他

关注(0)|答案(3)|浏览(100)

这听起来可能很傻，但我正在努力理解这一点。
当我用绝对路径插入CSS时-picture/fonts没有加载（404）。
我通过Chrome浏览器在内置的WebStorm服务器（2022.3）上测试了一个页面。
[我只是听说绝对路径更好，这就是为什么]
我错过了什么？
下面是一个例子：
档桉结构

css-pract[root]/
-folder/
--css/
---styles.css
--img/
---some.jpg
-index.html

index.html

<!doctype html>
<html lang="ru">
<head>
  <link rel="stylesheet" href="/folder/css/styles.css">
</head>
<body>
  <div class="has-bg"></div>
</body>
</html>

styles.css

.has-bg {
  background: url("/folder/img/some.jpg");
}

当我做相对的时候它就起作用了：第一个月
另外，index.html中的<img>加载了绝对路径，所以我希望它也能在css中工作。

css

来源：https://stackoverflow.com/questions/75010582/how-to-correctly-plug-css-into-html-with-absolute-path-to-make-picture-from-css

3条答案

按热度按时间

bvjxkvbb1#

我已经捆绑复制您的文件夹结构和相对和绝对路径为我工作。
你需要给予类为“has-bg”的div一个高度，但是，为了能看到背景图像，也许你忘了为绝对路径做这个了？

相对路径

在index.html中：

<link rel="stylesheet" href="./folder/css/styles.css" />

在样式.css中：

background: url("../img/some.jpg");

绝对路径

在index.html中：

<link rel="stylesheet" href="/folder/css/styles.css" />

在样式.css中：

background: url("/folder/img/some.jpg");

赞(0）回复(0）举报 2023-01-06

bksxznpy2#

实际上/folder/css/styles.css也是一个相对路径，如果你使用Windows，完整的绝对路径应该是这样的：C:/Folder/image.jpg.
你这么做只是为了学习吗？如果是的话，我想你不必担心这个。
如果要将其部署在某个服务器中，则需要一个完整的绝对路径，如下所示：https://website.com/images/image.jpg，然后您可以正确地使用绝对路径，如BASE_PATH/image/image.jpg，其中BASE_PATH是包含完整网站链接的某个变量。

赞(0）回复(0）举报 2023-01-06

wxclj1h53#

另一种方法是在html的<head>中设置基址，如下所示

<base href="https://www.example.com/">

然后所有的相对网址在您的网页将与此网址。

folder/img/some.jpg

将成为

https://www.example.com/folder/img/some.jpg

赞(0）回复(0）举报 2023-01-06

我来回答

如何正确地插入CSS到HTML与绝对路径，使图片从CSS的工作？

3条答案

相关问题

热门标签

最新问答