2012-07-05 148 views
2

我有以下文件结构:加载图像

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

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

在文件“的index.html”,对site1.com,我是点到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);

在此先感谢。

+0

请参阅[我的答案](http://stackoverflow.com/a/11498495/1333228)。 – DavChana 2012-08-14 18:45:45

+0

尝试内联css,检查[this](http://stackoverflow.com/a/28872505/2218697)在电子邮件通讯中显示带有背景图像的div – stom 2015-03-05 07:45:21

回答

4

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

+0

谢谢军阀!那是不是这样的一种方式?有十几个CSS文件,我将不得不在每一个CSS文件中。 – 2012-07-05 18:23:56

+0

@ user1504820如果我正确理解你,你不想在每个css文件中设置这个链接? – treng 2012-07-05 18:29:51

+0

实际上,我没有看到任何其他解决方案,并且已经在CSS文件的每个背景中都放上了绝对路径,但我仍然想知道是否有更直接的方法,而不是每次更改服务器时更改每个URL。 – 2012-07-05 18:34:17

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上,因此它将正确引用图像文件夹。

0

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

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,而不是相对于使用main.css任何*.html*.php文件。 因此假设images/background.jpgsite2.com/images/background.jpg,它不存在,因此图像不加载。

SOLUTION:
通过编写一个相对路径background-image: url(images/background.jpg);要使用index.htmlbackground.jpg,尝试images移动到文件夹site2.com然后,你可以写relative path您要在main.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使用它作为背景图像。