Question

我的问题很简单，我正在开发一个angular 4应用，我需要将图像作为背景放置在名为Home的组件中，该组件仅位于Home中的整个浏览器窗口零件... 下面显示了我的应用程序的结构：

index.html：

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>MyAngularApp</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>
      <app-root></app-root>
    </body>
    </html>

app.component.html：

<router-outlet></router-outlet>

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

home.component.html：

<div class="background">
<p>Example</p>
</div>

home.component.css：

.background {
    width: 100%;
    background: url('../../assets/background.jpg') no-repeat;
    background-size: cover;
    color: white;
    text-align: center;
}

正如您所看到的，我需要的是渲染家用组件时，它将占据整个浏览器窗口的图像显示为家用组件的背景，问题是我尝试过...图像不会占据浏览器的全屏，图像仅占据例句的背景，也没有响应。

非常感谢！

Answer 1

我已经成功解决了您的问题

https://stackblitz.com/edit/angular-hnxds3?file=src%2Fapp%2Fapp.component.html

您需要具有这样的背景CSS

div {
  max-width: 768px;
  max-height: 1024px;
  margin: auto;
  display: block;
}

这是一张正常工作的照片，它周围的白色边框是默认的html填充/边距，完成后白色边框会消失，您将需要使用normalize.css之类的东西将其删除图像充满了整个屏幕

Answer 2

这是对先前答案的回应，该答案建议添加一个宽度和高度100％的div （我没有足够的分数将其添加为答案本身的注释）。
除了四个角上的白色边框之外，解决方案几乎是完美的。

将以下内容添加到index.html以删除边缘。图像将随墙显示：
您可以在答案中提供的同一stackblitz链接中对其进行测试

<body style="background-color:black;padding:0px; margin:0px;">
<my-app>loading</my-app>
</body>

Answer 3

我遇到了同样的问题，但是有时我的内容超出了struct employee{ std::string name alignas(32); short salary; std::size_t age; employee(std::string name, short salary, std::size_t age) : name{name}, salary{salary}, age{age}{} };，所以超出的内容没有背景。这对我有用

heigth: 100vh

如何在角度4分量中设置自适应背景图像

3 个答案: