我创建了一个名为 login 的新组件，我必须为该组件(login.component.html)设置背景图像，仅适用于该组件。我尝试了堆栈溢出中提供的许多解决方案。但是图像没有设置为整个 body 的高度。 以下是我的元素文件。
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>
应用程序模块.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 { }
登录.component.html
<div class="inventory-body">
<!--content goes here-->
</div>
登录.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() {
}
}
最佳答案
全局样式(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;
}
关于css - 如何仅为 Angular 6 中的特定组件设置背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51512063/