Как поместить градиентный фон в пункты меню ASP.NET?
-
05-07-2019 - |
Вопрос
Босс хочет, чтобы меню главной страницы выглядело лучше. Я сгенерировал свой файл градиента с помощью одного из инструментов, доступных в сети, никаких проблем нет.
Я пытался создать класс 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 не нравится, и я не могу установить фоновое изображение для элемента управления меню или пунктов меню - кажется упущением GLARING, когда я могу сделать это для очень многих другие элементы управления.
Что мне не хватает?
Решение
Ты почти у цели ... попробуй это:
.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. */
}
Надеюсь, это поможет.
Другие советы
URL-адрес в вашем CSS должен быть абсолютным (или относительным) URL-адресом и не должен использовать отображение тильды, поскольку он не является компонентом на стороне сервера.
background-image: url( "/images/menu.jpg" );
Это не явное упущение. Совсем не упущение. Тильда - это конструкция ASP. В вашем CSS это не будет иметь никакого значения.
Один " заменить все " операция и все готово. Р>
Замените file: /// C: / Documents and Settings / Имя пользователя / Мои документы / Visual Studio 2008 / Веб-сайты / ThisSite пустым.
Я попытался установить свойство background-image из CSS в моем приложении ASP.Net (т.е. дать относительный путь, как описано в посте). Тем не менее, это не сработало для меня. Позже, установив background-image как background-image: url ('http: // localhost: 1701 / Images / BannerTileBackground.gif');
это сработало ..
Пожалуйста, дайте мне знать, каков правильный подход и почему он не работал раньше.