Comment référencer un fichier image dans une déclaration d'arrière-plan CSS lorsque votre fichier CSS se trouve dans un sous-répertoire ?

Établissement du chemin de l'image d'arrière-plan en CSS

Dans cet article, nous explorons les méthodes de référencement d'un fichier image dans une déclaration d'arrière-plan CSS.

Contexte

Un développeur a rencontré un problème où son image d'arrière-plan n'était pas appliquée à un élément. Leur fichier CSS se trouvait dans le répertoire Project/Web/Support/Styles/file.css, et l'image se trouvait dans le répertoire Project/Web/images/image.png.

Tentatives infructueuses

Le développeur a tenté sans succès plusieurs variantes de chemin :

background-image: url(/images/image.png);
background-image: url('/images/image.png');
background-image: url("images/image.png");
background-image: url(../images/image.png);
background-image: url('../images/image.png');
background-image: url("..images/image.png");

Solution

La solution réside dans la prise en compte du contexte du Emplacement du fichier CSS. Dans ce cas, le fichier CSS est deux niveaux plus profonds que le fichier image. Par conséquent, pour référencer correctement l'image, le chemin doit utiliser deux instances de "..", représentant une traversée de deux niveaux dans la structure de répertoires :

background-image: url('../../images/image.png');

Maintenant, l'image d'arrière-plan sera appliquée comme prévu dans la page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!