#html #css #sass
#HTML #css #sass
Вопрос:
Мое фоновое изображение не загружается! Я искал решение в stackoverflow, но то, что я нашел, не решило мою конкретную проблему.
Я использую GULP в качестве инструмента сборки, компилятор GULP SASS для компиляции SASS и GULP BROWSER-SYNC в качестве тестового сервера.
Мой html
<section class="img_header">
<div class="text_img_header_centered">
<h1>blabla</h1>
<h2>blablablabla</h2>
</div>
</section>
Мой CSS:
.img_header {
background-image: url('/assets/img/flugzeug_375x667.jpg');
}
Это моя файловая структура. main.css в папке css. blabla.jpg в img (как видно на рисунке). Мой main.scss находится в папке dev. Веб-сайт еще не подключен к сети. Но фоновое изображение не загружается!. Есть идеи? В этот проект включен только один css-файл. Все остальные свойства работают просто отлично.
Спасибо за вашу помощь 🙂
Комментарии:
1. Скорее всего, это проблема с путем. Но прежде чем мы сможем вам помочь, нам нужно больше узнать о проекте. Используете ли вы инструмент сборки, подобный Webpack? Что вы используете для обработки SCSS в CSS? Все это может повлиять на пути.
2. Кроме того, вам понадобится веб-сервер, работающий для использования
/в качестве root. Ваша файловая система не знает, что это такое. Помните, что пути в CSS относятся к странице, считывающей файл, а не к самому файлу CSS. Простое удаление первого / может решить проблему, но я не знаю, где находятся ваши HTML-файлы относительно корня сайта.3. Привет, ребята, спасибо за ваши ответы. Отличное сообщество. Я буду более точным. Я использую gulp в качестве инструмента сборки. Моим компилятором SCSS является Gulp Sass . Я использую инструмент gulp для синхронизации с браузером . Мой index.html (для которого требуется изображение) находится в корне папки сайта того же уровня, что и папка ресурсов. (пожалуйста, проверьте мой рисунок 9 «файловая структура» в главном потоке, чтобы увидеть информацию обо всей файловой структуре). Я хочу использовать фоновое изображение для заголовка, охватывающего один размер экрана, и я хочу использовать функции фонового изображения, чтобы покрыть контейнер изображением. Спасибо, ребята.
Ответ №1:
Я не очень хорошо вижу отступ, но я думаю, что это что-то вроде этого.
.img_header {
background-image: url('../../../assets/img/flugzeug_375x667.jpg');
}
В будущем вам следует попробовать использовать общедоступную папку и включить ее в свою сборку, используя что-то вроде Webpack. Вы также можете использовать абсолютный путь, если ваш файл передается через Интернет.
Комментарии:
1. Привет, спасибо за твой ответ. Я использую Gulp с помощью инструментов Gulp Sass и синхронизации браузера (в качестве тестового сервера). Я отредактировал поток, чтобы более точно объяснить мою проблему. Я также написал комментарий, как показано выше. К сожалению, я все еще не смог найти решение: (
2. @MarqueedeLuxe Это всего лишь мнение, но Gulp вроде как устарел. Вам следует попробовать перейти на другой пакет, такой как Webpack или CRA, если вы создаете приложения React.
3. Спасибо за ваш запрос. Знаете ли вы хороший учебник о том, как начать работу с webpack? Потому что у меня нет большого опыта работы с этим материалом. Все еще интересно, почему мой фон не работает.
4. Найдена ошибка. Это была проблема с высотой контейнера. Div просто рухнул, потому что внутри не было содержимого :- / . Теперь я установил высоту: 100 vh, и изображение отображается хорошо.
5. @MarqueedeLuxe lol для дальнейшего использования вы можете использовать инструменты разработчика, чтобы посмотреть, загружено ли оно на вкладке Сеть, или вы можете просто навести указатель мыши на путь на вкладке Элементы, и он должен появиться (Chrome).