CSS引用图片相对路径符号怎么写？

Posted 2023-05-01

我在网上搜了很久，就是分不清~和.和..符号的意义
我的目录结构是
（根目录）
--App_Date
--App_Themes
---主题1
----image
-----leaf.jpg
----main.css
--dafault.aspx
---dafault.aspx.cs
--masterpage.master
---masterpage.master.cs
--web.config
在main.css中引用上面目录下的leaf.jpg

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：bodybackground-image: URL(../../image/image.jpg)。

3、浏览器运行index.html页面，此时CSS成功通过相对路径引用了图片。

参考技术A 那就用background:url(./image/leaf.jpg)
或者background:url(image/leaf.jpg)等价于上面那个

/根目录
~/虚拟站点根目录
../上级目录（../../上上级目录）
./当前目录

假设你通过虚拟目录新建了个的asp.net站点，名字是site
则你的站点访问路径是http://localhost/site/
以你的目录结构为例，你的css可以这样写
background:url(./image/leaf.jpg)等价于background:url(image/leaf.jpg)
或者
background:url(/site/App_Themes/image/leaf.jpg)
或者
background:url(http://localhost/site/App_Themes/image/leaf.jpg)
~在css里不支持，假设支持的话，就是
background:url(~/App_Themes/image/leaf.jpg)本回答被提问者采纳 参考技术B ../image/leaf.jpg
-_-! 参考技术C 相对路径
../上一级 参考技术D ../leaf.jpg

node.js中static相对路径怎么写

参考技术A 从当前目录下的test.txt文件中读取数据，然后在result中打印输出。当在我们本地运行该代码应该没什么问题，可以成功执行。
但是如果这样的代码在项目中运行，同时把该项目部署到云服务器上时，很有可能会出现bug。
bug的提示就是无法在该目录找到test.txt文件。其实由于运行环境的不同，以上的相对路径的写法导致最后读取的位置是不同的。本回答被提问者采纳