如何在CSS URL中使用相对/绝对路径？

86

我有一个生产和开发服务器。问题是目录结构。

发展：

生产：

我如何在两个服务器上使用在属性中使用相同路径的style.cssincss文件夹background: url？我可以在相对路径中使用技巧吗？

css relative-path absolute-path

— 纳斯卡
source

128

该URL相对于CSS文件的位置，因此这应该对您有用：

url('../../images/image.jpg')

相对URL返回两个文件夹，然后返回该images文件夹-只要结构相同，它就适用于两种情况。

部分URL是相对于样式表的源而不是相对于文档来解释的

— 科比
source

如果我必须退后2步（更新了答案）url（../../ images / image.jpg），此功能可以吗？

— nascar

@anothershrubery-抱歉，我的第一个示例有缺陷

— nascar

@danip-应该可以，但是从出发您没有两个步骤http://domain.com/css/style.css。我不确定在那里可以做什么...编辑： -是的，它应该与更新的结构一起工作，我已经更新了答案（../似乎只是另一个）。

— Kobi

9

就个人而言，我将在.htaccess文件中修复此问题。您应该可以访问它。

这样定义您的CSS URL：

url(/image_dir/image.png);

在您的.htacess文件中，输入：

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^image_dir/(.*) subdir/images/$1

要么

RewriteRule ^image_dir/(.*) images/$1

取决于站点。

— 加里森·皮亚特（Garison Piatt）
source

2

我有同样的问题...每次我想发布CSS时..我都必须进行搜索/替换..相对路径也不适合我，因为相对路径从开发到生产都不同。

终于厌倦了搜索/替换，我创建了一个动态CSS（例如www.mysite.com/css.php），它是相同的，但现在我可以在CSS中使用我的php常量了。有点像

.icon{
  background-image:url('<?php echo BASE_IMAGE;?>icon.png');
}

并且使其动态化不是一个坏主意，因为现在我可以使用YUI压缩器对其进行压缩，而不会丢失开发服务器上的原始格式。

祝好运！

— 请不要属于
source

13

php问题上没有标签！OP可能根本不使用php。

— 巴兹（Bazzz）2011年

6

只是个例..你可以使用PHP，ASP，JSP ...的想法是一样的

— pleasedontbelong

6

它也可以是静态的。

— jcuenod 2015年

3

另外，如果这在CSS文件中，则将<?php **** ?>不会处理

— JD Vangsness