CSS корневая директория
У меня есть таблица стилей, в которой я подключаю фоновое изображение:
background: url(../Images/myImage.png);
Проблема в том, что страницы находятся в разных каталогах и используют этот CSS!
Мои CSS-файлы находятся в папке CSS, изображения — в папке Images, а HTML-страницы расположены в различных каталогах, в зависимости от их содержимого и назначения на сайте.
Все мои страницы наследуют этот CSS, так как он является ОСНОВНОЙ темой.
Путь, использованный в приведенном выше примере, является относительным. И, очевидно, этот путь работает только для некоторых страниц. Мне нужно, чтобы изображения в CSS ссылались на корневую папку, чтобы любой путь был правильным независимо от расположения файла в структуре каталогов!
Я пробовал следующие варианты:
~/Images/myImage.png
./Images/myImage.png
/Images/myImage.png
Images/myImages.png
Я не думаю, что существует селектор для корневой папки... но, может быть, он есть 😕
3 ответ(ов)
Вам нужно разместить изображение в корневом каталоге вашего домена или поддомена, чтобы оно было доступно по адресу:
http://website.to/Images/myImage.png
Если изображение находится в другом каталоге, например:
/images/yourimage.png
/styles/style.css
то в вашем файле style.css вы можете ссылаться на изображение следующим образом:
body {
background: url(../images/yourimage.png);
}
Это будет работать, потому что относительный путь ../images/yourimage.png правильно указывает на местоположение вашего изображения из директории стилей. Убедитесь, что пути к файлам указаны корректно, иначе изображение не загрузится.
Я использую относительный путь:
./../../../../../images/img.png
Каждый .. поднимает вас на одну папку вверх, к корню. Надеюсь, это поможет!
Например, ваша структура папок выглядит следующим образом:
Рабочий стол >
ПапкаПроекта >
index.html
css >
style.css
images >
img.png
Если вы находитесь в файле style.css и хотите использовать img.png в качестве фона, используйте следующий код:
url("../images/img.png")
У меня работает!
Как расположить div внизу своего контейнера?
Перенос строки в HTML с использованием '\n'
Медиа-запросы: Как нацелиться на десктоп, планшет и мобильные устройства?
Как сделать перенос строки с помощью CSS, не используя <br />?
Как адаптировать ширину flex-элемента к содержимому?