326 votos

El uso de la dirección URL relativa en el archivo CSS, lo que la ubicación es relativa?

Al definir algo así como un fondo URL de la imagen en un archivo CSS, cuando el uso de una dirección URL relativa, donde es la relación? Por ejemplo:

Supongamos que el archivo /stylesheets/base-styles.css contiene:

div#header { 
    background-image: url('images/header-background.jpg');
}

Si tengo que incluir esta hoja de estilo a distintos documentos a través de <link ... /> va a la URL relativa en el archivo CSS ser relativo a la hoja de estilos del documento en /stylesheets/ o relativo al documento actual que está incluido? Posibles rutas de acceso como:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

406voto

Alex Rozanski Puntos 26107

Según W3:

Parcial de las Url son interpretados en relación a la fuente de la hoja de estilo, no en relación con el documento

Por lo tanto, en respuesta a tu pregunta, va a ser relativa /stylesheets/.

Si usted piensa acerca de esto, esto tiene sentido, ya que el archivo CSS puede ser añadido a las páginas en diferentes directorios, por lo que la estandarización de que el archivo CSS significa que la Url trabajo donde las hojas de estilo son agregó.

45voto

M4N Puntos 48758

Es relativo a el archivo CSS.

25voto

jrista Puntos 20950

Con el fin de crear modular de hojas de estilo que no dependen de la ubicación absoluta de un recurso, los autores pueden utilizar URIs relativas. Las URIs relativas (como se define en [RFC3986]) se resuelven a la plena Uri mediante un URI base. RFC 3986, sección 5, define la normativa algoritmo para este proceso. Para hojas de estilo CSS, el URI base es la de la hoja de estilo, no de que el documento de origen.

Por ejemplo, supongamos la siguiente regla:

body { background: url("yellow") }

está situado en una hoja de estilo designado por el URI:

http://www.example.org/style/basic.css

El fondo de la fuente del CUERPO del documento será de baldosa con lo de la imagen es descrito por el recurso designado por el URI

http://www.example.org/style/yellow

Los agentes de usuario pueden variar en la forma en que ellos manejan no válido o Uri Uri que designar no disponible o no aplicable a los recursos.

Tomado de la especificación CSS 2.1.

21voto

Codebeef Puntos 17084

Es relativo a la hoja de estilos, pero yo recomendaría hacer el url relativo a la url:

div#header { 
  background-image: url(/images/header-background.jpg);
}

De esa manera, usted puede mover sus archivos sin necesidad de refactorizar ellos en el futuro.

13voto

Quentin Puntos 325526

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X