Question

我创建了一个名为login的新组件，我只需要为该组件设置背景图片（login.component.html）。我尝试了堆栈溢出中提供的许多解决方案。但是该图像未设置为身体的全高。以下是我的项目文件。

index.html

   <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <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.module.ts

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { AppComponent } from './app.component';
   import { LoginComponent } from './login/login.component';

   @Component({
     AppComponent,
     LoginComponent
   })
   imports: [
     BrowserModule,
     RouterModule.forRoot([
       { path: '', pathMatch: 'full', redirectTo: 'login' },
       { path: 'login', component: LoginComponent },

           ])

          ],
        providers: [],
        bootstrap: [AppComponent]
             })

       export class AppModule { }

login.component.html

    <div class="inventory-body">
        <!--content goes here-->
    </div>

login.component.css

    .inventory-body {
    margin: 20px 0px;
    color: white;
    padding: 20px;
    height:auto;
    background-image: url('/assets/img/1.jpg');
     }

这是login.component.ts文件

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

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
     })
   export class LoginComponent implements OnInit {

    constructor() { }

    ngOnInit() {

      }

     }

Answer 1

全局样式（style.css）

    html, body, app-root {
     height: 100%;
     margin: 0;
     }

在（login.component.html）

    <body  class="inventory-body">

    </body>

接下来，将css（login.component.css）写入（login.component.html）中存在的选择器

    .inventory-body {
     position: fixed;
     min-width: 100%;
     background-image: url("/assets/img/img-1.jpg");
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: center;
     background-size: cover;
     }

Answer 2

.inventory-body {
 position: fixed; 
  top: 0; 
  left: 0;
  min-width: 100%;
  min-height: 100%;
  background-image: url('')
}

Answer 3

如果要设置高度：自动，则必须在styles.css（全局css文件）中将html，body和app-root高度设置为100％。对app.component.css中的app.component和login.component.css中的login.component进行相同的操作。

Live demo.

如何仅为角度6中的特定组件设置背景图像

3 个答案: