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

【问题标题】：Loading images from CSS stylesheet that is on remote host从远程主机上的 CSS 样式表加载图像
【发布时间】：2012-07-05 18:12:32
【问题描述】：

我有以下文件结构：

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

提前致谢。

【问题讨论】：

请看my answer。
尝试内联 css ，检查 this 以在电子邮件通讯中显示带有背景图像的 div

标签： css image loading

【解决方案1】：

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

【讨论】：

感谢军阀！这是不这样做的一种方式吗？一个有十几个 CSS 文件，我必须在每个文件中都这样做。
@user1504820 如果我理解正确，您不想在每个 css 文件中设置此链接吗？
事实上，我没有看到其他解决方案，并且已经将绝对路径放在 CSS 文件的每个背景中，但我仍然想知道是否有比更改每个更直接的方法每次更改服务器时的 URL。
@user1504820 在我看来，这是解决您问题的最佳方法。您可以尝试编写 PHP 脚本，它会自动设置您当前的域，但我认为这不是一个好的选择。另外我建议你尽量减少对 css 文件的请求数量，这样页面加载速度会更快。

【解决方案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 文件夹。

【讨论】：

【解决方案3】：

您当前的设置：

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 时，服务器假定所有这些相对路径都 relative 到 main.css，而不是相对于使用 main.css 的任何 *.html 或 *.php 文件。所以images/background.jpg 被假定为site2.com/images/background.jpg，它不存在，因此图像不会加载。

解决方案：
要通过编写相对路径background-image: url(images/background.jpg); 在index.html 中使用background.jpg，请尝试将images 文件夹移动到site2.com 然后您可以为要在main.css 中使用的任何资源编写relative path。

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

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作为背景图片。

【讨论】：

【解决方案4】：

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

【讨论】：