HTML/CSS：背景图像总是相对于段落

Question

I am creating a test website with Angular, just to learn some things.我正在用 Angular 创建一个测试网站，只是为了学习一些东西。 First I put everything into the index.html, and this is the look I came up with:首先，我将所有内容都放入 index.html，这是我想出的外观：

index.html:索引.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>

I then copied this html code and entered it into the app.component.html.然后我复制了这个 html 代码并将其输入到 app.component.html 中。 Back in the index.html, I changed回到 index.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>

to到

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

But then my Site started to look like this:但后来我的网站开始看起来像这样：

Where did I make the error?我在哪里犯了错误？ My app.component.css is empty, so there is nothing able to change the look of that background.我的 app.component.css 是空的，所以没有什么可以改变背景的外观。 I can't see any connection between the paragraph and the body itself, but the background is still relative to my dollar bill.我看不出段落和正文之间有任何联系，但背景仍然与我的美元钞票有关。 When I put this into the app.component.css:当我把它放到 app.component.css 中时：

body {
  position: absolute;
}

,then i get this: ，然后我得到这个：

I'm just a starter in html/css, but all the tutorials about background images changed nothing for me我只是 html/css 的初学者，但所有关于背景图像的教程对我来说都没有改变

Answer 1

Looks like you have two body tags, according to your answer ofc :)根据您的回答 ofc ，您似乎有两个 body 标签 :)

One here ( index.html ) and second in app.component.html :一个在这里（ index.html ）和第二个在app.component.html ：

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

You can probably keep body into app.component.html , but you should remove it from index.html.您可能可以将 body 保留在app.component.html ，但您应该将其从 index.html 中删除。 And apply display: block; height: 100%并应用display: block; height: 100% display: block; height: 100% for app-root, I suppose. display: block; height: 100% app-root 的display: block; height: 100% ，我想。

HTML/CSS：背景图像总是相对于段落

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-31 10:32:52

HTML/CSS：背景图像总是相对于段落

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-31 10:32:52

解决方案1
1 已采纳 2020-03-31 10:32:52