Je veux vous référer à une image dans ma feuille de style principal pour une application Grails et je ne peux pas le faire fonctionner. Mon image vit dans l'emplacement standard de mon application Grails ... dans ma feuille de style, je veux l'utiliser comme image d'arrière-plan pour une classe ... p> project\web-app\css\main.css
5 Réponses :
Essayez d'ajouter "../" au début de l'URI. Par exemple: le "../" au début de l'URI indique au navigateur de monter un niveau au répertoire parent, puis regardez dans les images annuaire. Actuellement, vous l'avez configuré pour rechercher un sous-répertoire appelé images dans le répertoire contenant des feuilles de style.
Le problème est presque certainement avec quelque chose d'autre que le chemin. Ma suggestion a été adoptée à partir de la feuille de style par défaut créée avec des applications GRAVES. Peut-être que vous devriez revenir ou demander la question d'être une question plus générale du CSS?
Vous avez raison de jarez-vous. Quelque chose cache la page. Ctrl-F5 dans le navigateur ne l'a pas corrigé, je devais rebondir le serveur Grails pour obtenir la nouvelle feuille de style à apparaître. Je soupçonne que je l'avais résolu avant même de poster la question. Je ne suis pas sûr de ce que les règles sont sur le point de redémarrer Grails. Les changements de contrôleur semblent en avoir besoin.
Comment utiliser CSS et images d'un plug-in Grails?
Généralement, vous allez faire référence à une ressource dans une feuille de style comme une URL relative. L'URL de votre image doit être relative à l'emplacement du fichier CSS. Donc Si vous avez toujours des problèmes, vous pouvez le déboguer en utilisant un outil comme Firebug pour inspecter la page et vérifier chaque étape de votre style. ../ images / sortit-blue.png à partir de /appname/css/main.css se référencera /appname/Images/outbound-blue.png
Vérifiez que:
Un moyen plus portable pour spécifier les emplacements d'images consiste à utiliser la fonction de ressource ():
C'est de loin le moyen le plus utile. Il vous permet d'atteindre également des plugins, ce qui peut être plutôt nécessaire plus souvent que non.
Cela fonctionnera-t-il à l'intérieur d'un fichier .CSS ou uniquement lorsque vous utilisez des styles en ligne dans la page Affichage / .gsp page?
Cela ne fonctionne que dans le fichier .gsp , pas un .css fichier @Aroth
Soyez au courant. Utilisation de $ ressource {... ne fonctionne pas dans un fichier .CSS référencé. Vous devez ajouter un élément style .
Il existe un moyen de transmettre un fichier CSS "autonome" via des greils 'Moding Moteur avec étonnamment peu d'impact sur l'application, consultez cet article: WTH.US10/02/16/PRRECROSSING-CSS-IN- GRÈRAVES - C'était la solution idéale pour moi :)
Donc, le problème semblait être que le navigateur regardait dans
qui semble correct, mais si vous inspectez d'autres images sur la page, elles rendent du chemin donc, juste en excluant les images de votre chemin le nom devrait résoudre le problème. Cependant, ce n'est qu'un travail autour que je suis sûr que j'aurais une meilleure explication et une solution. Bravo. http: // localhost: 8080 /
Je n'ai eu aucun problème à l'aide de la solution Jared décrite ci-dessous. Après avoir changé, êtes-vous sûr que le navigateur n'avait pas mis en cache le style précédent et je n'ai tout simplement pas mis à jour? Que se passe-t-il lorsque vous utilisez quelque chose comme Firebug pour inspecter l'élément sur lequel vous vous attendez à ce que l'arrière-plan soit appliqué?
En outre, j'ai remarqué que vous avez constaté que vous avez référé à "OutBound-Blue" dans votre exemple initial et "Blue entrant" dans votre exemple mis à jour après avoir essayé la suggestion de Jared. Un crissière là-bas? J'essaie juste de trouver de petites choses qui auraient pu causer votre fond manquant. :)
avait le même problème. La raison pour laquelle cela ne fonctionne pas est parce que vous avez oublié les citations de l'URL. Écrire l'image-image: URL ('images / sortant-blue.png');