gpt4 book ai didi

css - 如何仅为 Angular 6 中的特定组件设置背景图像

转载 作者:技术小花猫 更新时间:2023-10-29 12:04:42 24 4
gpt4 key购买 nike

我创建了一个名为 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com