Référence des chemins d'accès virtuels de l'application dans le fichier .css

Question

Supposons que j'ai un répertoire de dossiers "images" sous la racine de mon application. Comment puis-je, à partir d'un fichier .css, référencer une image dans ce répertoire en utilisant un chemin d'accès relatif à l'application ASP.NET.

Exemple:

Lorsque dans le développement, le chemin de ~/Images/Test.gif peut résoudre à /MyApp/Images/Test.gif alors que, dans la production, il pourrait se résoudre à /Images/Test.gif (en fonction du répertoire virtuel de l'application). Évidemment, je veux éviter d'avoir à modifier le fichier .css entre les environnements.

Je sais que vous pouvez utiliser Page.ResolveClientUrl pour injecter dynamiquement une URL dans la collection Style d'un contrôle au moment du rendu. Je voudrais éviter de faire ça.

Answer 1

Si vous ne saviez pas que vous pouvez le faire ...

Si vous donnez un chemin relatif à une ressource dans un CSS, il est par rapport au fichier CSS, fichier non compris le CSS.

background-image: url(../images/test.gif); 

Cela peut donc fonctionner pour vous.

Answer 2

À l'intérieur du fichier .css, vous pouvez utiliser des chemins relatifs; Donc, dans votre exemple, dites que vous mettez votre fichier css dans ~/Styles/mystyles.css. Vous pouvez utiliser url (../ Images/Test.gif) comme exemple.

Answer 3

Malheureusement, Firefox a un bug stupide ici ... les chemins sont relatifs au chemin de la page, au lieu d'être relatifs à la position du fichier CSS. Ce qui signifie que si vous avez des pages dans des positions différentes dans l'arborescence (comme avoir Default.aspx dans la racine et Information.aspx dans le dossier View) il n'y a aucun moyen d'avoir des chemins relatifs de travail. (IE va résoudre correctement les chemins relatifs à l'emplacement du fichier CSS.)

La seule chose que j'ai pu trouver est ce commentaire sur http://www.west-wind.com/weblog/posts/269.aspx mais, pour être honnête, je n'ai pas encore réussi à le faire fonctionner. Si je fais, je vais modifier ce commentaire:

re: Donner un sens de ASP.net chemins par Russ Brooks 25 Février, 2006 @ 8:43 am

Personne ne pleinement répondu à la question de Brant sur les chemins d'image dans le fichier CSS lui-même. J'ai la réponse. La question était, "Comment utilisons-nous chemins d'image relatifs à l'application à l'intérieur du fichier CSS?" J'ai longtemps été frustré par ce même problème aussi, alors je viens de passer les 3 dernières heures à élaborer une solution.

La solution est d'exécuter vos fichiers CSS par le gestionnaire de la page ASPX, puis utiliser un petit morceau de code côté serveur dans chacun des chemins pour sortir le chemin de l'application racine . Prêt?

1. Ajouter au site Web.config:

<compilation debug="true"> 
<!-- Run CSS files through the ASPX handler so we can write code in them. --> 
<buildProviders> 
<add extension=".css" type="System.Web.Compilation.PageBuildProvider" /> 
</buildProviders> 
</compilation> 

<httpHandlers> 
<add path="*.css" verb="GET" type="System.Web.UI.PageHandlerFactory" validate="true" /> 
</httpHandlers> 

2. l'intérieur de votre CSS, utilisez la propriété Request.ApplicationPath où un chemin existe, comme ceci:

   #content { Arrière-plan: url (<% = Request.ApplicationPath %>/images/bg_content.gif) repeat-y; }

3. .NET sert pages ASPX avec un type MIME "text/html" par défaut, conséquent, votre nouveau pages côté serveur CSS sont servis avec ce type MIME qui provoque non-IE navigateurs à pas lu le fichier CSS correctement. Nous besoin de remplacer cela pour être "text/css". Il suffit d'ajouter cette ligne comme la première ligne de votre fichier CSS:

   <%@ ContentType="text/css" %> 
   

Answer 4

j'avais du mal à obtenir des images d'arrière-plan pour afficher des conteneurs de contenu et ont essayé de nombreuses solutions semblables à d'autres posté ici. J'avais défini le chemin relatif dans le fichier CSS, le définir comme un style sur la page aspx que je voulais que l'arrière-plan affiche - rien n'a fonctionné. J'ai essayé la solution de Marcel Popescu et cela n'a toujours pas fonctionné.

J'ai fini par le faire fonctionner suite à une combinaison de la solution de Marcel et d'essais et erreurs. J'ai inséré le code dans web.config, inséré la ligne text/css dans mon fichier CSS mais j'ai complètement supprimé la propriété background dans le fichier CSS et l'ai définie comme style sur le conteneur de contenu dans la page aspx que je voulais que l'arrière-plan afficher. Cela signifie que pour chaque page que je souhaite afficher en arrière-plan, j'ai besoin de définir la propriété d'arrière-plan de style, mais cela fonctionne parfaitement.

Answer 5

La solution de Marcel Popescu utilise Request.ApplicationPath dans le fichier css.

N'utilisez jamais Request.ApplicationPath - c'est maléfique! Renvoie des résultats différents en fonction du chemin!

Utilisez plutôt ce qui suit.

background-image: url(<%= Page.ResolveUrl("~/images/bg_content.gif") %>); 

Answer 6

Sous Windows 7, IIS 7.5:

Non seulement vous devez faire les étapes par Marcel Popescu mentionnées.

Vous devez également ajouter un mappage de gestionnaire dans les mappages de gestionnaires IIS 7.5. Pour que IIS sache que * .css doit être utilisé avec System.Web.UI.PageHandlerFactory

Il ne suffit pas de simplement définir les éléments dans le fichier web.config.

Answer 7

Facilitez-vous la vie, il suffit de mettre les images utilisées dans votre CSS dans le dossier /css/ aux côtés de /css/style.css. Ensuite, lorsque vous référencez vos images, utilisez des chemins relatifs (par exemple url(images/image.jpg)).

Je conserve toujours les images affichées avec un <img> dans un dossier /images/. Les photos par exemple sont du contenu, elles ne font pas partie de la peau/du thème du site. Ainsi, ils n'appartiennent pas au dossier /css/. Mettez votre CSS dynamique dans un contrôle utilisateur dans un fichier .ascx et vous n'avez pas besoin d'exécuter tous vos fichiers CSS via le processeur de page asp.net.

Answer 8

<%@ Control %> 
<style type="text/css> 
div.content 
{ 
background-image:(url(<%= Page.ResolveUrl("~/images/image.png") %>); 
} 
</style> 

Mais la meilleure façon de résoudre le problème ~ est de ne pas utiliser un ~ du tout. Dans Visual Studio, dans l'Explorateur de solutions, cliquez avec le bouton droit sur votre application, sélectionnez Propriétés et modifiez le chemin d'accès virtuel à /.