Я новичок в приложении mvc и создании сайта в системе просмотра aspx. У меня есть файл css в mycss/style.css и изображения находятся в images/img1.jpg. какова разница между, который является лучшим способом установки фонового URL-адреса в css?
background: url("../images/img1.jpg") no-repeat;
and background: url("~/images/img1.jpg") no-repeat;
в style.css
background: url("../images/img1.jpg") no-repeat;
Выше по отношению к текущему местоположению. Он поднимается на одну папку, затем вниз до папки с изображениями и, наконец, получает файл изображения.
background: url("~/images/img1.jpg") no-repeat;
Вышеуказанное недействительно. Тильда означает начало в корне сайта. Но CSS не поддерживает этот синтаксис. Эквивалент будет background: url("/images/img1.jpg") no-repeat;.
В зависимости от вашего макета сайта оба будут работать. Я склонен использовать корневые относительные пути, потому что, если вы переместите свой CSS-файл в другую папку, он может сломаться по пути относительно текущего местоположения.
Для хорошего обсуждения относительного относительного отношения к объекту относительно абсолютного, see this article.
Это был бы правильный путь.
background: url("../images/img1.jpg") no-repeat;
Как объяснить, почему версия с '~' также неверна? –
Вы также можете написать это так background: url("images/img1.jpg") no-repeat; без каких-либо «префикс», что означает «изображения в изображений папки.
Предполагается, что папка с изображениями находится в той же папке, что и CSS. Вероятно, это не так, если судить по опубликованному коду в вопросе. – mason
Я не думаю, что '~ /' будет работать в css-файлах. – edhedges
В чем разница между точками (./Images) и двойной точкой (../Images) в пути к файлу? –
'../ Images' означает перейти вверх по одному каталогу, а затем в папку« Images ». './Images' означает перейти в папку« Images »в текущем каталоге. – mason