Angular 7 - фон в div не работает
У меня есть проект Angular 7, структурированный следующим образом:
-|src
--|app
---|modules
-----|home
home — это компонент, имеющий
home.component.html:
<div class = "wrapper">
</div>
home.component.scss:
.wrapper {
background: url(../../../assets/background.jpg);
}
По какой-то странной причине background.jpg не отображается на странице. Я заметил, что когда я обновляю страницу с очисткой кеша, в исходном сегменте инструментов разработчика есть изображение background.jpg, и когда я нажимаю «открыть в новой вкладке», оно открывает изображение в новой вкладке.
Когда я помещаю какой-либо контент, фон делается не для всей страницы, а только для той части, где находится этот контент.
Отображается ли он со статическим внешним URL-изображением или, скажем, встроенным base64? Это тот же результат для относительного пути между конфигурациями сборки dev и prod через CLI? Вы просто забыли заключить URL-адрес в виде строки через url("../../blah.jpg")? Просто в порядке убывания....
Путь правильный. Ответ @Paulie_D является частичным решением, но теперь мне нужно, чтобы он расширялся до 100% высоты страницы.
Ответы 2
Вероятно, актив находится в другом каталоге, а размер div может не иметь размера:
.wrapper {
background: url(../assets/background.jpg);
width: 100%;
height: 100%;
}
Я нашел решение.
Angular портил обертки. Я нашел о :host и :host-context и использовал свойство /deep, поэтому CSS стилизовал оболочку хоста, а не оболочку, в которой она была.
Есть ли у
.wrapperкакой-либо контент? Вы не можете показать фон чего-то без размера.