Comment référencer des images intégrées à partir de CSS ?

Question

J'ai un fichier CSS qui est intégré dans mon assemblage. Je dois définir une image d'arrière-plan pour certains éléments à l'aide de ce fichier CSS, et l'image doit également être une ressource intégrée. Est-ce possible ? Existe-t-il un moyen de le faire de manière fiable ?

J'ai rencontré le problème en plaçant une feuille de style existante dans cette dll, puis je me suis rendu compte que les images n'apparaissaient pas. Je ne connais pas de moyen de le faire fonctionner car j'aurais besoin de connaître l'URL de l'image intégrée.

Quelqu'un a-t-il fait quelque chose de ce genre ?

Answer 1

<% = WebResource("image1.jpg") %>

Vous pouvez utiliser la déclaration ci-dessus dans votre fichier CSS, et lorsque vous enregistrez votre CSS avec l'attribut WebResourceAttribute, vous pouvez définir "PerformSubstitution" à true.

Default.css
body{
    background: <%=WebResource("xyz.jpg")%>
}

[assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]
[assembly, WebResource("xyz.jpg","image/jpg")]

Answer 2

Il suffit de suivre les étapes suivantes pour référencer une ressource web comme image d'arrière-plan en CSS

1. Référencer l'URL de l'image comme "background : url('<%=WebResource("xyz.jpg")%>') ;" de la manière suivante.

   Default.css
   body{
         background: url('<%=WebResource("xyz.jpg")%>');
       }

2. Dans le fichier AssemblyInfo.cs, enregistrez le fichier CSS avec l'attribut "PerformSubstitution=true" de la manière suivante

   [assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]

3. Maintenant, dans le fichier AssemblyInfo.cs, enregistrez le fichier image en tant que

   [assembly, WebResource("xyz.jpg","image/jpg")]

4. Faites un clic droit sur le fichier image (xyz.jpg) et le fichier CSS (Default.css) et cliquez sur Propriétés. Sélectionnez maintenant l'option "Build Resource" comme "Embedded Resource".

et c'est fait. Bon codage ! !!

Answer 3

Le mien est une légère variation des autres suggestions, mais il fonctionne pour mon CSS en ligne dans ma page ASP.NET.

1. Ajouter l'entrée suivante dans le fichier AssemblyInfo.cs - [assembly: WebResource("MyImageFile.png", "image/png")]
2. ajoutez le code suivant dans le CSS pour faire référence à la ressource incorporée - background-image: url('<%= Page.ClientScript.GetWebResourceUrl(typeof(MyUserControl), "MyImageFile.png") %>')

Answer 4

Et si on exposait les ressources par le biais d'un service Web ? Par exemple, dans le fichier CSS, définir background: url( getImage.aspx?image=newyork.jpg ) ?