Полоса прокрутки исчезает из-за фонового изображения - PullRequest
Новая
       2

Полоса прокрутки исчезает из-за фонового изображения

0 голосов
/ 13 июня 2019

Я новичок и пытаюсь создать веб-страницу с фоновым изображением в приложении .

Проблема в том, что когда я перехожу в приложение после страницы входа и все, появляется страница с именем сведения о семье , которая имеет контент с возможностью прокрутки, но из-за фонового изображения прокруткиБар не появляется.

Я попытался использовать image tag вместо использования фонового изображения, но затем содержимое не отображается поверх изображения, оно отображается под изображением.

App.component.html

<div class="background-image">
    <router-outlet></router-outlet>
</div>

styles.css 

.background-image {
    background-image: url('assets/icf.jpg');
    background-position: center top;
    background-size: 100% auto;
}

С тегом изображения

App.component.html 

<img src="assets/icf.jpg" alt="/">
<router-outlet></router-outlet>

Ответы [ 3 ]

0 голосов
/ 13 июня 2019 

body {
  background-image: url('https://dummyimage.com/200x200');
  height: 100%;
  width: 100%;
}
<html>
<body>
<p>Test data</p>
</body>
</html>

Попробуйте добавить изображение в тег Body с помощью background-image и использовать свойство repeat-x, repeat-y из css.

Затем изображениевсегда будет на заднем плане.

0 голосов
/ 13 июня 2019

Добавьте изображение в index.html и убедитесь, что div, в котором находится ваш угловой код, имеет более высокий z-индекс;релевантный index.html ниже: 

 <div class='bkgClass'>
    <div class='insideClass'>
        <my-app>loading</my-app>
    </div>
</div>

<style>
    .bkgClass {
        height: 100vh;
        width: 100vw;
        background: url("https://beta.akberiqbal.com/JumboMobT.JPG");
    }

    .insideClass {
        z-index: 1;
    }
</style>

Без изменений ваш app.component или любые другие компоненты;

вы можете проверить здесь работает стекаблитц

0 голосов
/ 13 июня 2019

Вы можете использовать метод тега изображения и назначить тегу img меньшее значение z-index, чем остальной контент 

<img src="assets/icf.jpg" alt="/" style="z-index: 0;">
<div class ="all-your-other-stuff" style="z-index: 1;"></>


.img{
background-image: url("https://dummyimage.com/200x200");
z-index: 0;
height: 200px;
width: 200px;
}

.content{

z-index: 1;
}
<div class="img">
<div class="content">TEXT ABOVE IMAGE</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...