asp.net - Referencia de las rutas virtuales relativas de la aplicación en el archivo.css

background-image dynamic-css

Question

Supongamos que tengo un directorio de carpetas "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:

En desarrollo, la ruta de ~ / Images / Test.gif podría resolverse en /MyApp/Images/Test.gif mientras que, en producción, podría resolverse en /Images/Test.gif (dependiendo del 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 control dinámicamente en el momento del renderizado. Me gustaría evitar hacer esto.

Answer 1

Lamentablemente, Firefox tiene un error estúpido aquí ... las rutas son relativas a la ruta de la página, en lugar de estar relacionadas con 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 que funcione todavía. Si lo hago, editaré este comentario:

re: Dar sentido a las rutas ASP.Net por Russ Brooks 25 de febrero de 2006 a las 8:43 a.m.

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

La solución es ejecutar sus archivos CSS a través del manejador de páginas ASPX, luego use un pequeño bit del código del lado del servidor en cada una de las rutas para generar la ruta de la aplicación raíz. Listo?

1. Agregar 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, use la propiedad Request.ApplicationPath donde exista una ruta, como esta:

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

3. .NET sirve páginas ASPX con un tipo MIME de "text / html" de forma predeterminada, por lo tanto, sus nuevas páginas CSS del lado del servidor se sirven con este tipo MIME que hace que los navegadores no IE no lean correctamente el archivo CSS. Necesitamos anular esto para que sea "text / css". Simplemente agregue esta línea como la primera línea de su archivo CSS:

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

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

En caso de que no supieras que podrías hacer esto ...

Si le da una ruta relativa a un recurso en un CSS, es relativo al archivo CSS, no al archivo, incluido el CSS.

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

Entonces esto podría funcionar para ti.

Answer 4

Estaba teniendo dificultades para mostrar imágenes de fondo para contenedores de contenido y he probado muchas soluciones similares a otras publicadas 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é haciendo que funcionara después de una combinación de la 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 una u otras páginas en las que quiero 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 solo debes seguir los pasos mencionados 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 a /css/style.css . Luego, cuando haga referencia a sus imágenes, utilice rutas relativas (por ejemplo, url(images/image.jpg) ).

Aún conservo las imágenes que se muestran con un <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

Coloque 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>

Pero la forma más fácil de resolver el ~ problema es no usar 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 a / .