Question

我有以下文件结构：

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);吗？

提前致谢。

Answer 1

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

的示例

Answer 2

由于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文件夹。

Answer 3

您当前的设置：

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

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

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

<强>原因：
当您编写相对路径images/background.jpg时，服务器会假定所有这些相对路径相对到main.css，而不是相对于任何*.html或*.php文件使用main.css。因此，images/background.jpg被假定为site2.com/images/background.jpg，它不存在，因此图片无法加载。

<强> SOLUTION：
要通过编写相对路径background.jpg在index.html中使用background-image: url(images/background.jpg);，请尝试将images文件夹移至site2.com然后您可以为relative path编写main.css要在On server 'site1.com': - index.html On server 'site2.com': - css\main.css - images\background.jpg中使用的资源。

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

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

你的CSS规则应该是：

css

其转换为：从当前目录（images）上移一个目录，然后进入background.jpg并获取{{1}}以将其用作背景图片。

Answer 4

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

从远程主机上的CSS样式表加载图像

4 个答案: