HTML / CSS: фоновое изображение всегда относительно абзаца - PullRequest
0 голосов
/ 31 марта 2020

Я создаю тестовый сайт с Angular, просто чтобы узнать некоторые вещи. Сначала я помещаю все в индекс. html, и вот такой взгляд я придумал:

enter image description here

index. html:

<!doctype html>
  <html lang="en">
<head>
  <meta charset="utf-8">
  <title>Reiche Freunde</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <a href="http://google.com">
    <p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
  </a>
</body>
</html>

Затем я скопировал этот код html и ввел его в app.component. html. Вернувшись в индекс. html, я изменил

<body style="background-image: url('assets/geld.jpg');">
  <a href="http://google.com">
  <p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
  </a>
</body>

на

<body>
  <app-root></app-root>
</body>

Но тогда мой сайт начал выглядеть так:

enter image description here

Где я сделал ошибку? Мой app.component. css пуст, поэтому ничто не может изменить внешний вид этого фона. Я не вижу никакой связи между абзацем и самим телом, но фон все еще относительно моей долларовой банкноты. Когда я помещаю это в app.component. css:

body {
  position: absolute;
}

, тогда я получаю это:

enter image description here

Я только начинающий в html / css, но все уроки по фоновым изображениям ничего не изменили для меня

1 Ответ

1 голос
/ 31 марта 2020

Похоже, у вас есть два тега тела, согласно вашему ответу c:)

Один здесь (index.html) и второй в app.component.html:

<body>
  <app-root></app-root>
</body>

Возможно, вы можете сохранить тело в app.component.html, но вы должны удалить его из индекса. html. И применить display: block; height: 100% для приложения- root, я полагаю.

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