为Angular 6中的所有组件设置通用背景

Question

I am trying to get a background (comprising an image and colour) to be on all the components, and have put the code for it in styles.css. 我试图在所有组件上使用背景（包含图像和颜色），并将其代码放入styles.css中。 It appears on the main AppComponent page, but any other components that are rendered appear on top of that and cover the background with a white background of their own. 它显示在AppComponent主页上，但是呈现的所有其他组件都显示在该页面的顶部，并用自己的白色背景覆盖背景。 So for now I am applying the background to every component and adjusting the top positioning. 因此，现在我将背景应用于每个组件并调整顶部位置。

Is there any easier, more efficient way to do this? 有没有更简单，更有效的方法来做到这一点？

Here's some of the CSS code that I'm applying in my components. 这是我在组件中应用的一些CSS代码。

a.component.css a.component.css

.bg {
   background: rgba(240, 240, 240, 1) url('src/assets/images/background.png');
   background-repeat: no-repeat;
   background-position: 60% -312px;
   background-size: 2874px 818px;
}

b.component.css b.component.css

.bg {
   background: rgba(240, 240, 240, 1) url('src/assets/images/background.png');
   background-repeat: no-repeat;
   background-position: 60% -482px;
   background-size: 2874px 818px;
}

Answer 1

If you are making a node app in that case you can just set background for your main.handlebars file. 如果在这种情况下制作节点应用程序，则只需为main.handlebars文件设置背景。 And the other pages will render it from the main layout view. 其他页面将从主布局视图呈现它。

would look a bit like this: 会看起来像这样：

<html>
 <head>
  <style>background-color: #color_id</style>
 </head>
 <body>
  {{{body}}}
 </body>
</html>

为Angular 6中的所有组件设置通用背景

问题描述

1 个解决方案

解决方案1
0 2018-10-15 09:08:46

为Angular 6中的所有组件设置通用背景

问题描述

1 个解决方案

解决方案1 0 2018-10-15 09:08:46

解决方案1
0 2018-10-15 09:08:46