logo标签列表

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

angular
3

我有一个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%;

}

我有一个用于登录组件的样式。但它没有覆盖整个窗口，只覆盖了表单部分。

3
[So]不是一个免费的代码编写服务。你应该尝试自己编写代码。如果你遇到问题，在 做更多研究 后，可以用一个清晰的解释来 发布你所尝试的内容，并提供一个 **[mcve]**。我建议阅读 [如何提问好问题] 和 完美的问题。此外，请确保参观 [导览]。 - Igor
5个回答
15

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

在全局 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');
}
1
这个代码可以运行，但是每当我更改组件时，背景会卡住直到我刷新页面。有没有解决办法？ - franpen
2
你可以在ngOnDestroy生命周期钩子上移除类，这样每当你更改组件时它就不会卡住。 - Suhel
1
@franpen 或者你可以在组件1中使用以下代码：document.body.classList.remove('bg-img-login'); document.body.classList.add('bg-img-register'); 在组件2中使用以下代码：document.body.classList.remove('bg-img-register'); document.body.classList.add('bg-img-login'); 当然，在父组件中你需要同时移除它们。 - Mr. Wizard
嗯，但是那样你就必须在每个其他组件中都删除它，这不太实际。 - Mr. Wizard
@Mr.Wizard，这就是问题所在，我还没有找到一个实际的解决方案。不过，我回家后会测试你的想法。 - franpen
@franpen 看看 @Suhel Khan 的评论。你可以在 ngOnDestroy() 上销毁图像。这将防止你在每个组件中手动删除它。 - Aaron Jordan
3

我正在使用Angular 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;
}
0
在您的登录组件的@Component装饰器中，您可以添加一个styleUrls字段。这样做将允许您仅为登录组件使用样式表。
@Component({
  selector: 'your-selector'
  templateUrl: ['path/to/your/html/component'],
  styleUrls: ['path/to/your/stylesheet'],
})

然后，您可以在样式表中仅更改登录组件的背景。

body{ 背景图片: url('https://s.zkcdn.net/Advertisers/d36ea4926dfa4978ab2556ba7688692c.png') ; 背景位置: 居中; 背景重复: 不重复; 背景大小: 自适应; -webkit-背景大小: 自适应; -moz-背景大小: 自适应; -o-背景大小: 自适应; 高度:100%;} - RohanG
2
我有这个登录组件的样式。但它没有覆盖整个窗口，只覆盖了表单部分。 - RohanG
你可以尝试添加一个div来包装你的body，并设置这个div的背景。不确定为什么会出现这种结果，请检查你的组件是如何嵌套在一起的。 - tom
0

我正在使用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');
    }
}

此致敬礼，

0

// 在父级 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%;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接