Question

对于CSS，适用以下规则：

Partial URLs are interpreted relative to the source of the style sheet,
not relative to the document.

但这是我的问题：

我有不同的网站使用相同的CSS文件。虽然它们使用相同的布局，但CSS引用的实际图像对于每一个都是不同的。

例：

#header {
width: 960px;
height: 200px;
background: url(/images/header.png);
}

每个域都有自己的“images”文件夹和自己的“header.png”，我希望CSS能够引用它。目前它的行为应该如此，并试图在托管CSS的域上找到png文件。我想要的是它从调用CSS文件的域中获取png文件。

我对样式表使用“link”，因为“@import”会破坏IE中的渐进式渲染。

有任何建议或解决方法吗？

Answer 1

您可以使用服务器端脚本在每个网站上复制CSS文件。

example1.com/global.css是您的CSS文件

example2.com/global.css.php是一个实际返回example1.com

的global.css文件的PHP脚本

脚本可以像

一样简单

<?php
readfile('http://example1.com/global.css');
?>

但如果你想更好地处理缓存，你需要更多的代码。

Answer 2

我想要的是从调用CSS文件的域中获取png文件。

您将需要为每个引用的域分别设置URL。因此www.example1.com将其样式表引用为/style/sheet.css，然后从http://www.example1.com/style/sheet.css获取它，而www.example2.com从http://www.example2.com/style/sheet.css获取它。

然而，仅仅因为它们看起来与客户端不同并不意味着它们必须是服务器端的不同文件（具有所有意味着的维护）。您可以将每个域上的Alias指向真实的共享CSS文件。

我能想到的唯一其他解决方法是拆分像background-image这样的网址引用规则，并将它们放在特定于域的样式表或内部样式表中。

Answer 3

最快的选择是每个站点都有自己的css来引用相对于css的图像

#header {
   background: url(images/header.png);
}

要解决更新问题，您可以设置批量文件，将更改复制到必要的子网站位置

Answer 4

我能想到的唯一解决方案是为每个指定特定于域的图像的域使用额外的样式表：

/* domain specific images */
#header {
    background-image: url(/images/header.png);
}

Answer 5

有没有一种方法可以在使用“link”时将带有php的域注入样式表？

例如：

#header {
background: url('.$domain.'/images/header.png);
}

我不确定这是怎么回事，但也许其他人可以随身携带它！是否会使用这样的技巧在IE中打破渐进式渲染？

Answer 6

据我所知，

之间存在差异

#header {
background: url('/images/header.png');
}

和

#header {
background: url('../images/header.png');
}

第一个是相对于您网站的根目录，第二个是相对于父目录（与您的css文件位置有关）。

修改

如果两个站点都是从同一主机提供的，您是否可以使用符号链接链接样式表？

使CSS url（）相对于文档

6 个答案: