Question

我有一个Angular 2应用程序。在这个应用程序中，我有几个组件。我想只为登录组件添加背景图像。我该怎么做？

body{
    background-image: url('https://s.zkcdn.net/Advertisers/d36ea4926dfa4978ab2556ba7688692c.png') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height:100%;

}

我对登录组件有这种风格。但它并没有覆盖整个窗户。它仅涵盖表格部分。

Answer 1

我遇到了同样的问题。但下面的代码对我有用。

在全局css文件（style.css）中添加以下css代码。

.bg-img
{
    background-image: url('/assets/images/back.jpg');
    background-position: center;
    background-repeat: no-repeat; 
}

并在必需的component.ts文件中的ngOnInit部分添加以下代码。（例如：login.component.ts）

ngOnInit() {
    document.body.classList.add('bg-img');
}

Answer 2

在登录组件的@Component装饰器中，您可以添加styleUrls字段。这样做只允许您为登录组件使用样式表。

@Component({
  selector: 'your-selector'
  templateUrl: ['path/to/your/html/component'],
  styleUrls: ['path/to/your/stylesheet'],
})

然后，您可以在样式表中仅更改login组件

的背景

Answer 3

我正在使用Ionic 3.但Ionic使用Angular。

在我的login.html页面中，我有这个：

<ion-content class="background">
 ...
</ion-content>

我认为你可以试试：

<body class="background">
</body>

在我的login.scss页面中，我有这个：

page-login {
    .background {
        // Path of my picture
        background-image: url('../assets/background.gif');
    }
}

致以最诚挚的问候，

Answer 4

我正在使用角度7。这就是我在组件中获得完整背景图像的方式在login.component.html

中

<div class="bg-img">

 </div>

然后在login.comonent.css中

.bg-img{
 min-height: 100vh;
width: 100%;
background: url('../../../src/assets/loginimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 5

// 在 div 父

.bg-component {
    background-image: url('../../../assets/images/backgroundweb/layer-2-copy-2@3x.png') !important;
    background-repeat: no-repeat;
    background-size: 100%;
    position: fixed;
    width: 100%;
    height: 100%;
}

如何在Angular 2组件中添加背景图像？

5 个答案: