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

我有一个Angular 2应用程序。在这个应用程序中，我有几个组件。我想仅为登录组件添加背景图片。我怎么做？如何在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%; 

}

我有这种样式的登录组件。但它不覆盖整个窗口。它只覆盖表单部分。

来源

2017-07-26 RohanG

[所以] *不是*自由代码编写的服务。预计你会尝试**自己编写代码**。在[做更多研究]之后（http://meta.stackoverflow.com/questions/261592），如果你有问题，你可以**发布你已经尝试过**的清单，说明什么是不工作的**并提供** [mcve] **。我建议阅读[问]一个好问题和[完美问题]（http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/）。另外，一定要参加[旅游]。 – Igor

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

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

然后，您可以在您的样式表，改变你的背景只为login组件

来源

2017-07-26 14:12:49 Octoverflow

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; 身高：100％; } – RohanG

我有这种风格的登录组件。但它不覆盖整个窗口。它只覆盖表单部分。 – RohanG

你可以尝试添加一个'div'封装你的身体并设置这个div的背景。不知道为什么你有这个结果，检查你的组件是如何在另一个 – Octoverflow

你能分享你的代码？

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

此致敬礼，

来源

2017-07-26 14:25:47

我面临同样的问题。但下面的代码适合我。

在全局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'); 
}

来源

2017-11-30 12:55:44

这可以工作，但不知何故，每当我改变组件，背景卡住，直到我刷新页面。有没有解决这个问题的方法？ –

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

回答

相关问题