Ссылки на ссылки относительно виртуальных путей в файле .css

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

Пример:

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

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

Ответы

Ответ 1

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

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

re: Осмысление путей ASP.Net Russ Brooks 25 февраля 2006 @8:43 Я

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

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

Добавить в 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>

Внутри вашего CSS используйте свойство Request.ApplicationPath везде, где существует путь, например:

#content { background: url (<% = Request.ApplicationPath % > /images/bg_content.gif) repeat-y; }
.NET обслуживает страницы ASPX с типом MIME "text/html" по умолчанию, следовательно, ваш новый серверный CSS страницы подаются с этим MIME тип, который заставляет браузеры, отличные от IE, не читайте файл CSS правильно. Мы необходимо переопределить это "Текст/CSS". Просто добавьте эту строку как первая строка вашего файла CSS:
<%@ ContentType="text/css" %>

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

Решение Marcel Popescu использует Request.ApplicationPath в файле css.

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

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

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

Ответ 5

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

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

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

Ответ 6

В Windows 7 IIS 7.5:

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

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

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

Ответ 7

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

Ответ 8

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

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

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