Попытка добавить фоновое изображение на веб-страницу, используя угловой каркас - PullRequest
1 голос
/ 26 июня 2019

Итак, я настраиваю свою собственную веб-страницу (она еще не запущена) и у меня возникают проблемы с добавлением фонового изображения.Я исследовал сеть и этот сайт, в частности, в поисках возможных решений моей проблемы, но без преобладания.Я понимаю, как добавить фоновое изображение не с помощью угловой структуры, а через простую HTML-страницу, где все хранится в одном HTML-файле.Тем не менее, когда я пробую это в angular Framework, все это разваливается.(имеется в виду, что изображение либо не отображается, либо отображается и просто не соответствует стилям, установленным для изображения)

Прежде чем что-то пытаться, я зашел в свой файл angular.json и изменил «* 1005».* »К следующему:« assets »: [« src / favicon.ico »,« src / assets »,« src / assets / images »-> я добавил это, так что angular знает, где найти изображение],

Первый подход: (этот подход действительно работает в моем простом одностраничном HTML-файле) В HTML-файле:

   <div class="bgimg-1">*usually i'd put my navbar here*</div>

В CSS файле:

        .bgimg-1 {
            background-image: url("me_copy.jpg");
            height: 100%;
            width: 100%;
            position: relative;
            opacity: 0.8;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
          }

Второй подход:

Чтобы убедиться, что у меня правильный путь, я даже попытался разместить изображение на веб-странице, не заботясь о стилях или чем-то еще.Путь, который я работал, чтобы отобразить изображение.Затем, когда я начал стилизовать его, изображение не подчинялось всем моим ограничениям стиля и просто проходило мимо правой и нижней сторон моей веб-страницы.Снова, я попробовал это на моей другой веб-странице, используя то же самое изображение, которое использует только один документ HTML для всего, и это работало.Похоже, что при воспроизведении нескольких файлов (не все в одном месте) все это разваливается.

Чтобы дать вам представление о моих ожиданиях посещение Мои ожидания касаются веб-страницычтобы:

  1. отображать фоновое изображение, которое соответствует экрану, например, при первом опубликованном подходе

  2. (это не такНажимая на вопрос, я просто поражен, что я не мог понять это) для любых других фоновых изображений, чтобы соответствовать размеру веб-страницы и не переполняться.Любые предложения приветствуются.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...