Относительные виртуальные пути приложения в .css файле

Question

Предположим, у меня есть каталог с папкой "images" в корне моего приложения. Как я могу из файла .css ссылаться на изображение в этом каталоге, используя относительный путь приложения ASP.NET.

Пример:

В процессе разработки путь ~ / Images / Test.gif может принимать значение / MyApp / Images / Test.gif , а в процессе работы он может принимать решение / Images / Test.gif (в зависимости от виртуального каталога для приложения). Я, очевидно, хочу избежать необходимости изменения файла .css между средами.

Я знаю, что вы можете использовать Page.ResolveClientUrl для динамического добавления URL-адреса в коллекцию стилей элемента управления во время рендеринга. Я хотел бы избежать этого.

Answer 1

К сожалению, в Firefox есть глупая ошибка ... пути указаны относительно пути страницы, а не относительно положения файла CSS. Это означает, что если у вас есть страницы в разных позициях в дереве (например, наличие Default.aspx в корне и Information.aspx в папке «Просмотр»), то нет возможности иметь рабочие относительные пути. (IE правильно решит пути относительно местоположения файла CSS.)

Единственное, что я смог найти, это комментарий к http://www.west -wind.com / weblog / posts / 269.aspx , но, честно говоря, мне пока не удалось заставить его работать , Если я это сделаю, я отредактирую этот комментарий:

re: Понимание путей ASP.Net Расс Брукс 25 февраля 2006 г. @ 8:43 ч

Никто не полностью ответил на вопрос Бранта о путях изображения внутри CSS сам файл. У меня есть ответ. Вопрос был: «Как мы используем относящиеся к приложению пути к изображениям ВНУТРИ файла CSS? »Я давно разочарован этой самой проблемой, так что я просто провел последние 3 часа выработка решения.

Решение состоит в том, чтобы запустить ваши файлы CSS через обработчик страницы ASPX, затем использовать небольшой кусочек серверного кода в каждый из путей для вывода корня путь приложения. Готов?

1. Добавить в 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. Внутри вашего CSS используйте свойство Request.ApplicationPath везде, где есть путь, например:

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

3. .NET обслуживает страницы ASPX с типом MIME «text / html» по умолчанию, следовательно, ваш новый серверный CSS страницы подаются с этим MIME тип, который заставляет браузеры не IE не правильно читать файл CSS. Мы нужно переопределить это, чтобы быть "Текст / CSS". Просто добавьте эту строку как первая строка вашего CSS-файла:

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

Answer 2

В случае, если вы не знали, что можете сделать это ...

Если вы указываете относительный путь к ресурсу в CSS, он относится к файлу CSS, а не к файлу, включая CSS.

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

Так что это может сработать для вас.

Answer 3

Сделайте вашу жизнь проще, просто поместите изображения, используемые в вашем CSS, в папку /css/ рядом с /css/style.css. Затем, когда вы ссылаетесь на свои изображения, используйте относительные пути (например, url(images/image.jpg)).

Я все еще сохраняю изображения, которые отображаются с <img> в папке /images/. Например, фотографии являются контентом, они не являются частью обложки / темы сайта. Таким образом, они не принадлежат папке /css/.

Answer 4

Поместите свой динамический CSS в пользовательский элемент управления в файл .ascx, и тогда вам не нужно будет запускать все ваши CSS-файлы через обработчик страниц asp.net.

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

Но самый простой способ решить проблему ~ - вообще не использовать ~. В Visual Studio в обозревателе решений щелкните правой кнопкой мыши свое приложение, выберите «Окно свойств» и измените виртуальный путь на /.

Answer 5

Решение Марселя Попеску использует Request.ApplicationPath в файле css.

Никогда не используйте Request.ApplicationPath - это зло! Возвращает разные результаты в зависимости от пути!

Используйте вместо этого следующее.

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

Answer 6

В Windows 7, IIS 7.5:

Мало того, что вы должны делать шаги, упомянутые Марселем Попеску.

Вам также необходимо добавить сопоставление обработчика в сопоставления обработчиков IIS 7.5. Чтобы IIS знал, что * .css должен использоваться с System.Web.UI.PageHandlerFactory

Недостаточно просто установить материал в файле web.config.

Answer 7

У меня были трудности с отображением фоновых изображений для контейнеров с контентом, и я пробовал много решений, похожих на другие, размещенные здесь. Я установил относительный путь в файле CSS, установил его в качестве стиля на странице aspx, и хотел, чтобы фон отображался - ничего не получалось. Я попробовал решение Марселя Попеску, но оно все равно не сработало.

Я закончил тем, что заставил его работать после сочетания решения Марселя с методом проб и ошибок. Я вставил код в файл web.config, вставил строку text / css в мой файл CSS, но я полностью удалил свойство background в файле CSS и установил его в качестве стиля в контейнере содержимого на странице aspx, для которого я хотел, чтобы фон дисплей.

Это означает, что для каждой или любых других страниц, на которых я хочу отобразить фон, мне нужно будет установить свойство стиля фона, но оно прекрасно работает.

Answer 8

Внутри .css файла вы можете использовать относительные пути; так что в вашем примере, скажем, вы поместили свой файл CSS в ~ / Styles / mystyles.css. Вы можете использовать URL (../ Images / Test.gif) в качестве примера.