Question

我有这个：

body {
    background-image: url("Images/Background.jpg");
}

但无论我使用何种变体，它产生的网址都是错误的。

当我运行我的网站时，网址是localhost / MYSITE，因为它在本地IIS服务器（而不是iisexpress）上进行拼接。

图像存储在应用程序根目录中名为Images的文件夹中。

如果我检查元素，这就是我得到的：

background-image: url("Images/Background.jpg");

给出

url("http://localhost/MYSITE/Styles/Images/Background.jpg")

我不知道样式的来源。

background-image: url("/Images/Background.jpg");

给出

url("/Images/Background.jpg")

哪个错误，因为它需要是MYSITE / Images。

background-image: url("~/Images/Background.jpg");

给出

url("http://localhost/MYSITE/Styles/~/Images/Background.jpg")

样式是LESS文件的位置，所以我想这就是为什么？

background-image: url("~/../Images/Background.jpg");

给出

url("http://localhost/MYSITE/Styles/Images/Background.jpg")

发生了什么事？！为什么它一直在做这些奇怪的事情？

当我部署到现场时，它将不再是IP / MYSITE，它将是mysite.mydomain.com所以我必须让相对路径正确。

Answer 1

如果您在css中提供图像的网址，则路径从您的css所在的文件夹开始，如果您的css文件位于Styles文件夹中并且您提供了背景图像网址

url("/Images/Background.jpg");

本地主机/ MYSITE /样式/图像/ Background.jpg

因为你的文件夹结构是这样的

Root
  Styles
  Images

所以，如果你想从Styles文件夹中的css文件中的Images文件夹中指出一些图像，你应该这样写

url("../Images/Background.jpg");

这意味着转到Root的父文件夹，然后转到Images，然后转到Background.jpg