angular 中的全屏背景图片

Question

我用下面的代码在angular中设置了一张图片作为背景图片。目标是让背景图像全屏显示而无需滚动。我的一个了解 html+css 的朋友说我的代码没问题。也许原因是 angular 的工作方式有点不同？！你知道我的问题在哪里吗？事实上，输出只是一行“Hello World”，而背景只是出现在这一行。

app.component.html

<html>
<head>
  <title>Hauptmenü</title>
</head>
<body>
  <label class="title">Hello World</label>
</body>

app.component.scss

html {
  margin: 0px;
  height: 100%;
  width: 100%;
}
body {
  background-image: url('../assets/background.jpg');
  margin: 0px;
  min-height: 100%;
  width: 100%;
}

app.component.ts

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

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

  ngOnInit(){
  }
}

Answer 1

我刚刚尝试了这个，结果我不得不这样做：

<body style="background-image: url(your-image-here); background-size: cover;">

</body>

Answer 2

试试这个 CSS:

html
{
 margin:0px;
 height:100%;
 width:100%;
 background:url('../assets/background.jpg')no-repeat center center fixed; 
 -webkit-background-size:cover;
 -o-background-size:cover;
 -moz-background-size:cover;
 background-size:cover;
}
body
{
 /*no other attributes required for a full screen background image*/
}

它一直对我有用。

angular 中的全屏背景图片

Fullscreen background image in angular

html

sass

angular