Question En utilisant l'URL relative dans le fichier CSS, à quel emplacement est-il relatif?


Lorsque vous définissez quelque chose comme une URL d'image d'arrière-plan dans un fichier CSS, en cas d'utilisation d'une URL relative, où est-il relatif? Par exemple:

Supposons le fichier /stylesheets/base-styles.css contient:

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

Si j'inclue cette feuille de style dans différents documents via <link ... /> l'URL relative dans le fichier CSS sera-t-elle par rapport au document de feuille de style dans /stylesheets/ ou par rapport au document actuel c'est inclus à? Chemins possibles comme:

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

444
2018-06-02 16:21


origine


Réponses:


Selon W3:

Les URL partielles sont interprétées par rapport à la source de la feuille de style, et non par rapport au document.

Par conséquent, en réponse à votre question, il s'agira de /stylesheets/.

Si vous pensez à cela, cela a du sens, car le fichier CSS pourrait être ajouté à des pages dans des répertoires différents, donc sa standardisation dans le fichier CSS signifie que les URL fonctionneront partout où les feuilles de style sont liées.


509
2018-06-02 16:24



C'est relatif au fichier CSS.


62
2018-06-02 16:23



Il est relatif à la feuille de style, mais je vous recommande de créer les URL par rapport à votre URL:

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

De cette façon, vous pouvez déplacer vos fichiers sans avoir à les refactoriser à l'avenir.


39
2018-06-02 16:28



Pour créer des feuilles de style modulaires qui ne dépendent pas de l'emplacement absolu d'une ressource, les auteurs peuvent utiliser des URI relatifs. URI relatifs (tels que définis dans [RFC3986]) sont résolus en URI complets en utilisant un URI de base. RFC 3986, section 5, définit l'algorithme normatif pour ce processus. Pour les feuilles de style CSS, l'URI de base est celle de la feuille de style, pas celle du document source.

Par exemple, supposons la règle suivante:

body { background: url("yellow") }

est situé dans une feuille de style désignée par l'URI:

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

L'arrière-plan du BODY du document source sera classé avec l'image décrite par la ressource désignée par l'URI.

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

Les agents utilisateurs peuvent avoir une manière différente de gérer les URI ou les URI non valides qui désignent des ressources indisponibles ou inapplicables.

Pris du Spécification CSS 2.1.


29
2018-06-02 16:27



Pour les feuilles de style CSS, l'URI de base est celle de la feuille de style, pas celle du document source. 

(Tout le reste serait cassé, IMNSHO)


15
2018-06-02 16:24



Un problème qui peut survenir, et apparemment casser cela est lorsque vous utilisez la minimisation automatique de css. Le chemin de requête pour le bundle minifié peut avoir un chemin différent de celui d'origine. Cela peut arriver automatiquement, ce qui peut causer de la confusion.

Le chemin de requête mappé pour le bundle minifié doit être "/ originalcssfolder / minifiedbundlename" et pas seulement "minifiedbundlename".

En d'autres termes, attribuez à vos ensembles le même chemin (avec /) que la structure de dossiers d'origine. Ainsi, toutes les ressources externes telles que les polices et les images seront mappées pour corriger les URI par le navigateur. L'alternative consiste à utiliser une URL absolue (réfs dans votre css mais ce n'est généralement pas souhaitable).


5
2018-01-27 04:03



Cela a fonctionné pour moi. ajouter deux points et barre oblique.

body{
    background: url(../images/yourimage.png);
}

0
2018-06-19 08:42



Essayez d'utiliser:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images étant le dossier contenant l'image que vous voulez poster.


-3
2017-08-10 17:18