Maison > interface Web > tutoriel CSS > le corps du texte

Comment spécifier correctement un chemin d'image d'arrière-plan en CSS lorsque mon fichier CSS et mon image se trouvent dans des répertoires différents ?

Susan Sarandon
Libérer: 2024-11-12 10:01:02
original
663 Les gens l'ont consulté

How do I correctly specify a background image path in CSS when my CSS file and image are in different directories?

Spécification du chemin de l'image d'arrière-plan en CSS

En CSS, la définition d'une image d'arrière-plan nécessite de fournir le chemin du fichier. La requête suivante vise à résoudre le problème de trouver le chemin correct vers l'image compte tenu de la structure organisationnelle du projet.

Problème :
Le fichier CSS de l'utilisateur se trouve dans Projet/ Web/Support/Styles/file.css, tandis que l'image qu'ils ont l'intention d'utiliser se trouve dans Project/Web/images/image.png. Ils ont essayé plusieurs méthodes pour définir la propriété background-image mais n'ont pas obtenu le résultat souhaité.

Solution :
Pour spécifier correctement le chemin d'accès à l'image en CSS, le relatif le chemin du fichier CSS doit être pris en compte. Dans ce cas, le fichier CSS se trouve deux dossiers en haut du répertoire images. Par conséquent, deux préfixes ../ (répertoire parent) sont requis dans le chemin :

background-image: url('../../images/image.png');
Copier après la connexion

En parcourant deux répertoires, le fichier CSS localise correctement l'image dans la structure du projet.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal