3

我有以下文件结构：

On server 'site1.com':
- images\background.jpg
- index.html

On server 'site2.com':
- css\main.css

在 site1.com 上的文件“index.html”上，我指向 site2.com/css/main.css 上的样式表。

在文件'main.css'上，我有一条规则说：background-image: url(images/background.jpg);

问题是文件'index.html'没有加载'background.jpg'作为它的背景。我该如何解决？唯一的方法是background-image: url(site1.com/images/background.jpg);在样式表规则中写入绝对路径？

提前致谢。

4

4 回答 4

8

使用完整链接background-image: url(http://site1.com/images/background.jpg); ，绝对路径不包括域。绝对路径示例background-image:url(/images/background.jpg);

于 2012-07-05T18:17:57.077 回答
1

由于 CSS 文件中引用的 URL 与 CSS 文件本身相关，因此它不会从 site1.com 加载 background.jpg。因此，您可以在 CSS 中使用图像文件的完整 URL，或者您可以加载具有站点特定样式的附加样式表。

您将首先从 site2.com 加载 CSS，然后再从 site1.com 加载 CSS。在这种情况下，您的 site1 CSS 文件中的唯一样式是background-image: url(images/background.jpg);因为这个新的 CSS 文件托管在 site1.com 上，它将正确引用 images 文件夹。

于 2012-07-05T18:22:27.390 回答
1

您当前的设置：

On server 'site1.com':
    - images\background.jpg
    - index.html

On server 'site2.com':
    - css\main.css

文件 'index.html' 不会加载 'background.jpg' 作为其背景，因为main.css&background.jpg位于不同的域中。

原因：
当您编写相对路径 images/background.jpg时，服务器假定所有这些相对路径都相对于main.css，而不是相对于任何*.html或*.php使用main.css. 所以images/background.jpg假设为site2.com/images/background.jpg，它不存在，因此图像不会加载。

解决方案：
要通过写入相对路径来使用background.jpg，请尝试将文件夹移动到然后您可以为要使用的任何资源编写. index.htmlbackground-image: url(images/background.jpg);imagessite2.comrelative pathmain.css

在这种情况下，您的设置应该是：

On server 'site1.com':
    - index.html

On server 'site2.com':
    - css\main.css
    - images\background.jpg

你的 CSS 规则应该是： 

background-image: url(../images/background.jpg);

这意味着：从当前目录（css）上上一个目录，然后进入images并background.jpg使用它作为背景图像。

于 2012-07-16T05:20:44.797 回答
0

唯一的解决方案是使用完整的 URL，但是，没有什么能阻止您在客户端或服务器端功能处理图像 URL。

于 2012-07-05T19:27:32.040 回答