2011-04-28 43 views
67

Tengo un servidor de producción y desarrollo. El problema es la estructura del directorio.¿Cómo usar las rutas relativas/absolutas en las URL css?

Desarrollo:

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

Producción:

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

¿Cómo puedo tener una carpeta style.css en css que utiliza en ambos servidores el mismo camino para la propiedad background: url? ¿Hay algún truco que pueda usar con rutas relativas?

Respuesta

99

La url es relative to the location of the CSS file, por lo que este debe trabajar para usted:

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

La url relativa va dos carpetas de nuevo, y luego a la carpeta images - debería funcionar para ambos casos, siempre y cuando la estructura es el mismo.

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

URLs parciales se interpretan en relación con el origen de la hoja de estilo, no en relación con el documento

+0

es que esto funciona Si tengo que ir a 2 pasos hacia atrás (actualizado la respuesta) url (../../ imágenes/imagen.jpg)? – danidacar

+0

@anothershrubery - lo siento mi primer ejemplo era defectuoso – danidacar

+0

@danip - que debería funcionar, pero usted no tiene dos pasos de 'http: // domain.com/css/style.css'. No estoy seguro de qué se puede hacer allí ... ** EDITAR: ** - sí, debería funcionar con la estructura actualizada, he actualizado la respuesta (simplemente otro '../', parece). – Kobi

2

tuve el mismo problema ... cada vez que quería para publicar mi css ... tuve que hacer una búsqueda/reemplazo ... y la ruta relativa tampoco me funcionaría porque las rutas relativas eran diferentes de dev para la producción.

último era cansado de hacer la búsqueda/reemplazar y he creado un CSS dinámico, (por ejemplo www.mysite.com/css.php) que es lo mismo, pero ahora podía usar mis constantes de PHP en el css. somethig como

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

y no es una mala idea para que sea dinámica, porque ahora podía comprimirlo usar el compresor YUI sin perder el formato original en mi servidor dev.

¡Buena suerte!

+9

¡No hay una etiqueta 'php' en la pregunta! OP podría no estar usando php en absoluto. – Bazzz

+6

es sólo un exemple .. usted podría utilizar PHP, ASP, JSP .. la idea es la misma – pleasedontbelong

+2

también podría ser estática. – jcuenod

4

Personalmente, arreglaría esto en el archivo .htaccess. Deberías tener acceso a eso.

definir su URL CSS como tal:

url(/image_dir/image.png); 

En el archivo Htacess, poner:

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

o

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

dependiendo del sitio.

Cuestiones relacionadas