如何在css url中使用相对/绝对路径?

I have a production and development server. The problem is the directory structure.

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

Development:

发展:

http://dev.com/subdir/images/image.jpg
http://dev.com/subdir/images/image.jpg
http://dev.com/subdir/resources/css/style.css
http://dev.com/subdir/resources/css/style.css

Production:

生产:

http://live.com/images/image.jpg
http://live.com/images/image.jpg
http://live.com/resources/css/style.css
http://live.com/resources/css/style.css

How can I have a style.css in css folder that uses on both servers the same path for the background: url property? Is there a trick I can use with relative paths?

我怎么能有这种风格呢?css文件夹中的css，在两个服务器上使用相同的路径作为背景:url属性?对于相对路径有什么技巧可以用吗?

3 个解决方案

#1

103

The url is relative to the location of the CSS file, so this should work for you:

url与CSS文件的位置有关，所以这应该对您有用:

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

The relative url goes two folders back, and then to the images folder - it should work for both cases, as long as the structure is the same.

相对url返回两个文件夹，然后返回到images文件夹——只要结构相同，这两种情况都可以使用。

From http://www.w3.org/TR/REC-CSS1/#url:

从http://www.w3.org/TR/REC-CSS1/ url:

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

部分url被解释为相对于样式表的源，而不是相对于文档。

#2

Personally, I would fix this in the .htaccess file. You should have access to that.

就我个人而言，我将在.htaccess文件中修复这个问题。你应该有机会接触到它。

Define your CSS URL as such:

定义您的CSS URL如下:

url(/image_dir/image.png);

In your .htacess file, put:

在你的。htacess文件中，写上:

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

或

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

depending on the site.

根据不同的网站。

#3

i had the same problem... every time that i wanted to publish my css.. I had to make a search/replace.. and relative path wouldnt work either for me because the relative paths were different from dev to production.

我也有同样的问题……每次我想发布我的css。我必须做一个搜索/替换。相对路径对我也不起作用，因为相对路径在开发和生产之间是不同的。

Finally was tired of doing the search/replace and I created a dynamic css, (e.g. www.mysite.com/css.php) it's the same but now i could use my php constants in the css. somethig like

最后，我厌倦了搜索/替换，我创建了一个动态的css(例如www.mysite.com/css.php)，但现在我可以在css中使用php常量了。somethig像

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

and it's not a bad idea to make it dynamic because now i could compress it using YUI compressor without loosing the original format on my dev server.

让它动态化并不是一个坏主意，因为现在我可以使用YUI压缩器压缩它，而不会在我的dev服务器上丢失原始格式。

Good Luck!

好运！

#1

103