Ruta virtual relativa de la aplicación de referencia en el archivo .css

Question

Supongamos que tengo un directorio de carpeta "images" debajo de la raíz de mi aplicación. ¿Cómo puedo, desde dentro de un archivo .css, hacer referencia a una imagen en este directorio usando una ruta relativa a la aplicación ASP.NET?

Ejemplo:

Cuando en el desarrollo, el camino de la ~/Imágenes/Test.gif podría resolver a /MyApp/Images/Test.gif, mientras que, en la producción, que podría resolver a /Images/Test.gif (según el directorio virtual de la aplicación). Yo, obviamente, quiero evitar tener que modificar el archivo .css entre entornos.

Sé que puede usar Page.ResolveClientUrl para inyectar una url en la colección de estilos de un control dinámicamente en el momento del renderizado. Me gustaría evitar hacer esto.

Answer 1

En caso de que no sabía que se podía hacer esto ...

Si usted le da una ruta relativa a un recurso en un CSS que es relativa al archivo CSS, no presentar incluyendo el CSS.

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

Así que esto podría funcionar para usted.

Answer 2

Dentro del archivo .css puede usar rutas relativas; en su ejemplo, digamos que coloca su archivo css en ~/Styles/mystyles.css. Puede usar url (../ Images/Test.gif) como ejemplo.

Answer 3

Desafortunadamente, Firefox tiene un error estúpido aquí ... las rutas son relativas a la ruta de la página, en lugar de ser relativas a la posición del archivo CSS. Lo que significa que si tiene páginas en diferentes posiciones en el árbol (como tener Default.aspx en la raíz e Information.aspx en la carpeta View) no hay forma de tener rutas relativas de trabajo. (IE resolverá correctamente las rutas relativas a la ubicación del archivo CSS.)

Lo único que pude encontrar es este comentario en http://www.west-wind.com/weblog/posts/269.aspx pero, para ser honesto, no he logrado hacerlo funcionar todavía. Si lo hago voy a editar este comentario:

re: Dar sentido a ASP.Net Caminos por Russ Brooks 25 de de febrero de, de 2006 @ 08:43 am

Nadie totalmente respondido a la pregunta de Brant sobre las rutas de las imágenes dentro del archivo CSS . Tengo la respuesta. La pregunta fue, "¿Cómo utilizamos rutas de imágenes relativas a la aplicación DENTRO del archivo CSS?" Durante mucho tiempo he sido frustrado por este mismo problema también, , así que acabo de pasar las últimas 3 horas buscando una solución.

La solución es ejecutar los archivos CSS través de la página ASPX controlador, entonces utilizar un pequeño fragmento de código del lado del servidor en cada uno de los caminos de salida a la ruta de la aplicación de la raíz . Listo?

1. Añadir a 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. Dentro de su CSS, utilice la propiedad Request.ApplicationPath donde existe un camino, de esta manera:

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

3. .NET sirve páginas ASPX con un tipo MIME "text/html" por defecto, en consecuencia, su nuevo css del lado del servidor páginas se sirven con este tipo MIME que hace que no IE los navegadores a no leen correctamente el archivo CSS. Nosotros necesitamos sobrescribir esto para que sea "text/css". Basta con añadir esta línea como la primera línea de su archivo CSS:

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

Answer 4

que estaba teniendo dificultades para conseguir imágenes de fondo para mostrar los contenedores de contenido y han intentado muchas soluciones similares a otro publicado aquí. Establecí la ruta relativa en el archivo CSS, la configuré como un estilo en la página aspx que quería que mostrara el fondo, nada funcionó. Intenté la solución de Marcel Popescu y todavía no funcionó.

Terminé haciéndolo funcionar después de una combinación de solución de Marcel y prueba y error. Inserté el código en web.config, inserté la línea text/css en mi archivo CSS pero eliminé la propiedad background en el archivo CSS y la configuré como un estilo en el contenedor de contenido en la página aspx. Quería que el fondo monitor.

Significa que para cada o cualquier otra página que quiera mostrar el fondo tendré que establecer la propiedad de fondo de estilo, pero funciona muy bien.

Answer 5

La solución de Marcel Popescu está utilizando Request.ApplicationPath en el archivo css.

Nunca use Request.ApplicationPath - ¡es malo! ¡Devuelve resultados diferentes según la ruta!

Use lo siguiente en su lugar.

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

Answer 6

En Windows 7, IIS 7.5:

No sólo usted tiene que hacer los pasos mencionado por Marcel Popescu.

También necesita agregar una asignación de controlador en las asignaciones de controlador de IIS 7.5. Para que IIS sepa que * .css se debe usar con System.Web.UI.PageHandlerFactory

No es suficiente simplemente configurar las cosas en el archivo web.config.

Answer 7

Haz que la vida sea fácil, solo coloca imágenes usadas en tu CSS en la carpeta /css/ junto con /css/style.css. Luego, cuando haga referencia a sus imágenes, use rutas relativas (por ejemplo, url(images/image.jpg)).

Todavía guardo las imágenes que se muestran con <img> en una carpeta /images/. Las fotos, por ejemplo, son contenido, no son parte del diseño/tema del sitio web. Por lo tanto, no pertenecen a la carpeta /css/.

Answer 8

Ponga su CSS dinámico en un control de usuario en un archivo .ascx y luego no necesita ejecutar todos sus archivos css a través del procesador de páginas asp.net.

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

embargo, la forma más fácil de resolver el problema ~ es no utilizar un ~ en absoluto. En Visual Studio, en el Explorador de soluciones, haga clic con el botón derecho en su aplicación, seleccione Ventana de propiedades y cambie la ruta virtual al /.