CSS中的相对路径

最新推荐文章于 2025-05-29 21:15:53 发布
原创 最新推荐文章于 2025-05-29 21:15:53 发布 · 1.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

本文详细介绍了在文件系统中如何使用相对路径来引用同一目录或不同层级目录下的文件和图片。包括直接使用文件名、通过文件夹名称加斜杠及使用两个点加斜杠的方式。

相对于文件自身出发，就是相对路径。
◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。

这里写图片描述

◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称

这里写图片描述

◆图片（html）在文件的上一级目录里，..+/+图片（html）名称

这里写图片描述强调内容

◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称

这里写图片描述

★总结：找到下一级目录（文件夹）的图片（文件）用 /
跳出当前目录使用..

绝对路径

这里写图片描述

相对路径和绝对路径在HTML/CSS中的详解
CbrFullstack的博客
10-02 737
相对路径基于当前文件的位置，而绝对路径是完整的URL或磁盘路径。相对路径基于当前文件的位置，而绝对路径是完整的URL或磁盘路径。绝对路径是完整的URL或磁盘路径，用于直接指定文件或资源的准确位置。绝对路径是完整的URL或磁盘路径，用于直接指定文件或资源的准确位置。相对路径是相对于当前文件所在位置的路径。它不包含完整的URL或磁盘路径，而是基于当前文件的位置来定位其他文件或资源。相对路径和绝对路径是在HTML和CSS中常用的概念，用于指定文件或资源的位置。文件位置：确保文件或资源的位置与路径指定的位置一致。
HTML 相对路径和绝对路径
weixin_30260399的博客
03-23 279
相对于文件自身出发，就是相对路径。 跳出当前目录使用../ ◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。 ◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称 ◆图片（html）在文件的上一级目录里，..+/+图片（html）名称 ◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称 ...
css中的相对路径
sprita1的专栏
05-24 709
有如下目录结构：    ----image         -----leaf.jpg    ----main.css        在main.css中引用leaf.jpg：./image/leaf.jpg 或 image/leaf.jpg    说明：./表示同级                ../表示上级
CSS绝对路径与相对路径
qq_53959286的博客
01-21 2168
统一资源定位符（URL） URL (Uniform Resource Locator）的中文全称是“统一资源定位符”。 URL是文档在web或者internet上的地址，一般用在超链接当中。尽管URL看起来很长很复杂，但它总是由4个部分构成， 即协议名、主机名、文件夹名（路径）和文件名。 例如： http：//www.tsinghua.edu.cn/publish/th/index.html http是协议名，www.tsinghua.edu.cn是主机名，publish/th是文件夹名（th文件夹在pu
CSS相对路径和绝对路径
u013114440的专栏
12-16 884
html布局机制是文档流模型，即块元素独占一行，内联元素不会独占一行。 相对定位 position：relative 相对定位即相对元素本身原来的位置设置偏移，用left、right、top、bottom进行定位后，元素会根据原来的位置进行移动，但是该元素不会脱离文档流，元素移动前所占的位置会保留。 绝对定位 position：absolute 绝对定位找的相对对象时该元素
jsp、css中引入外部资源相对路径问题分析
10-24
例如，CSS文件中的某个类使用了background-image属性，直接写相对路径如background-image:url(images/left_bg.gif);可能会导致图片无法正确显示，因为这个路径是相对于CSS文件的位置而言的。 对此，有几种解决方案...
CSS与JS中的相对路径引用简单介绍
01-19
javascript和css文件中采用相对路径，其基准路径是完全不同的。 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件，则index.php即为宿主)所处位置为基准。 2...
完美解决webpack打包css背景图片路径问题
11-20
设置`publicPath`为`'../'`，使得CSS文件能正确引用相对路径的图片： ```javascript { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, 'css-loader', 'less-loader' ``` 这样一来，...
绝对路径与相对路径
记录和分享属于我的“IT”时光。
04-21 977
【绝对路径】 绝对路径，指完整地描述文件的位置的路径。 【相对路径（推荐）】 相对路径，就是指相对于当前文件的位置。 ../表示上一级目录 下面将以html引用css文件的方式重点表演一下相对路径的写法： （一）当html文件和css文件在同一文件夹内时： 【示例①】 href中直接输入css文件名及后缀即可，如href=“xy.css” （二）当html文件和css文件在不同文件夹内时： 【示例①】 当css文件位于html文件下一级时，直接输入下一级文件夹名+css文件名及后缀即可，如href=“下
html/css相对路径引用/、../、../../、/..、/../..、同级、下级、标准写法
热门推荐
NEET007的博客
07-21 3万+
/ 、../、../../ 、/.. 、/../.. 、标准写法、同级、下级
相对路径和绝对路径
weixin_59272777的博客
02-01 1249
相对路径（Relative Path）和绝对路径（Absolute Path）是用于定位文件或目录在文件系统中位置的两种方式。相对路径是相对于当前工作目录或当前文件所在目录的路径。它指定了如何从当前位置到达目标文件或目录的位置关系。相对路径不包含完整的路径信息，而是基于当前位置来定位目标。相对路径和绝对路径是用于定位文件或资源在计算机系统中的位置的两种不同方式。它们在使用和表达上有一些优点和缺点，下面是对相对路径和绝对路径的优点、缺点以及举例进行说明。
html相对路径
zl325118的博客
07-03 1186
HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？种路径的写法：相对路径和绝对路径。假设info.html路径是。如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。为了避免这些错误，正确...
关于CSS中的相对路径和绝对路径
chenghuo9876的博客
07-15 412
"." 代表当前所在目录，相对路径。如:<a href="./abc">文本</a>或<img src="./abc" />； ".." 代表上一层目录，相对路径。如:<a href="../abc">文本</a>或<img ...
相对路径规范总结
coper_的博客
07-30 854
相对路径
关于VS+Qt开发中qss的图片路径（相对路径）加载问题
lsc19971931的博客
10-09 2600
问题：在qss中使用相对路径时，没有生效。 原因：相对哪个文件没有搞清楚，因为在开发过程中，并不是相对于qss文件本身。 解决： 　　当我们在开发过程中，需要将qss文件加载到main文件里，那么，此时相对的是main文件而不是qss文件本身。 　　当我们使用编译好的exe文件打开软件，那么此时相对的是exe文件，也不是qss文件本身。 ...
CCS中添加路径为相对路径
小柚子的博客
03-28 2216
CCS相对位置
绝对路径和相对路径
2301_76270413的博客
05-31 541
CSS03.HTML通过两次 ../../ 返回到javawebcode,再根据javaweb下路径依次编写到CSS01.css,即可从CSS03.HTML访问到CSS01.CSS里面对html的样式修改。绝对路径（Absolute path）是指具有完整路径信息的路径。绝对路径提供了从文件系统根目录开始的完整路径。绝对路径可以使用在任何计算机中，因为它们始终表示同一位置。即可从CSS03.HTML访问到CSS01.CSS里面对html的样式修改。./ 符号表示当前文件所在文件夹。
CSS 如何在CSS的URL中使用相对/绝对路径
最新发布
weixin_42209957的博客
05-29 523
有时候，需要链接到当前文件的上级目录的子目录中的文件。如果所需的文件位于当前文件的同级子目录中，可以使用相对路径中的子目录名称来链接它。如果对于定义链接位置，知道文件在服务器上的绝对路径，可以使用服务器的绝对路径来链接文件。”的文件和一个名为”images”的子文件夹，其中包含一个名为”bg.jpg”的图片。如果所需的文件与当前文件位于同一级目录中，可以使用相对路径来链接它。假设我们有一个名为”index.html”的文件，我们想在CSS中使用来自外部网站的图片作为背景图像。
html/css相对路径引用
weixin_39214481的博客
01-07 1454
/ 代表根目录，慎用 ../ 代表上一级目录 ../../ 代表上两级目录 /.. 代表下级目录 /../.. 代表下两级目录 标准写法：       同级——直接引用文件    &lt;link rel="stylesheet" type="text/css" href="theme0.css" /&gt;      下级 ——同级目录/下级目录/文件名     &lt;lin...
css 图片相对路径
01-14
在CSS中，可以使用相对路径来引用图片。相对路径是相对于当前CSS文件的路径来定位图片的位置。 以下是一个使用相对路径引用图片的示例： ```css .background { background-image: url("../images/background.jpg...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值