Как поставить градиентный фон на ASP.NET пункты меню?

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

Я попытался создать класс CSS для каждого пункта меню, но когда я использую директиву background-image и конструктор стилей, я получаю строку типа: 

background-image: url('file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite/Images/Gradient.png')

...когда то, что я хочу есть 

background-image: url('~/Images/Gradient.png')

Первый url-адрес, конечно, будет работать только тогда, когда я отлаживаю на своей локальной машине-разверните это, и я обливаюсь. Так много других ASP.NET объекты работают с"~/", чтобы указать директорию верхнего уровня веб-сайта, но моему css - файлу это не нравится, и я не могу установить фоновое изображение для элемента управления меню или пунктов меню-кажется вопиющим упущением, когда я могу сделать это со многими другими элементами управления.

Что я упускаю?

5 2
css relative-path absolute-path

5 ответов:

Ты почти на месте... попробуйте это: 

.menuStyle
{
  background-image: url('/images/BG.gif'); /* Putting a slash in front means its relative to the root.  No slash would be relative to the current directory. */
  background-repeat: repeat-x; /* assuming you have a vertical gradient. */
}
Надеюсь, это поможет.
1

Url-адрес в CSS должен быть абсолютным (или относительным) url-адресом и не использовать отображение Тильды, поскольку это не серверный компонент.

    background-image: url(  "/images/menu.jpg" );
4

Это не вопиющее упущение. Это вовсе не упущение. Тильда-это конструкция аспида. В вашем CSS это не будет иметь никакого значения.

0

Одна операция "заменить все", и все готово.

Замените file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite на пустой.

0

Я попытался установить свойство background-image из CSS в моем ASP.Net применение (то есть предоставление относительного пути, как описано в посте). Однако у меня это не получилось. Позже, установив фоновое изображение как background-image:url('http://localhost:1701/Images/BannerTileBackground.gif');, это сработало..

Пожалуйста, дайте мне знать, каков правильный подход и почему он не работал раньше.
0