Question

我有一个角度2的应用程序，我必须在主页和其他页面上使用单独的背景图像，我已经在index.html上应用图像以获得背景图像，但我需要在不同的页面上添加不同的图像。这是我的代码

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
  <script src="resources/js/semantic.min.js"></script>
<script src="resources/js/slideshow.js"></script>
  <link rel="stylesheet" type="text/css" class="ui" href="resources/css/semantic.css" />
  <link rel="stylesheet" type="text/css" class="ui" href="resources/css/angularSwitch.css" />
  <link rel="stylesheet" type="text/css" class="ui" href="resources/css/main.css" />
  <link href="resources/css/datepicker3.css" rel="stylesheet" type="text/css">
  <link href="resources/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="resources/css/styles.css" rel="stylesheet" type="text/css">
<script src="resources/js/jquery-1.11.1.min.js"></script>
  <script src="resources/js/bootstrap.min.js"></script>
  <script src="resources/js/chart.min.js"></script>
  <script src="resources/js/chart-data.js"></script>
  <script src="resources/js/easypiechart.js"></script>
  <script src="resources/js/easypiechart-data.js"></script>
  <script src="resources/js/bootstrap-datepicker.js"></script>
  <script>
<!--Icons-->
<script src="resources/js/lumino.glyphs.js"></script>
</head>
<body style="background-image: url("resources/static/pic/slide_1.jpg");" >

  <app-root></app-root>
</body>
</html>

请建议我如何实现这一目标。

Answer 1

如何在组件级别而不是在index.html内部应用背景图像？然后每个组件可以具有不同的背景图像。你甚至可以有一个单独的css文件，其中包含一段代码：

body { background-image: url("resources/static/pic/slide_1.jpg"); }

并将其包含在每个组件中＆＃34; styleUrls＆＃34;您希望该背景图像出现。对要使用不同图像的组件使用不同的css。

希望这有帮助

Answer 2

是的，您可以执行此操作，就像在应用程序的不同组件上具有不同的背景图像一样。为此，请按照以下说明进行操作。

在css主style.css文件中，将正文和html的高度设置为100％，请参考以下代码。

Style.css

body,html{
    height: 100%;
}

现在在namespace.component.css文件的组件css文件中添加以下代码

.component-body{
    background-image: url(/assets/images/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
}

现在，请确保div中的所有内容都包含此类。您可以将潜水课程和CSS相应地放入其CSS文件中。有关更多信息，您可以参考this link

如何在angular2中的两个不同页面中使用不同的背景图像？

2 个答案: