Wie kann ich verschiedene Hintergrundbilder auf zwei verschiedenen Seiten in angular2 erstellen?

Ich habe eine eckige 2 Anwendung, auf der ich separate Hintergrundbilder auf der Homepage und anderen Seiten verwenden muss, ich habe Bild auf Index.html angewendet, um ein Hintergrundbild zu haben, aber ich muss verschiedene Bilder auf verschiedenen Seiten hinzufügen. Dies ist mein CodeWie kann ich verschiedene Hintergrundbilder auf zwei verschiedenen Seiten in angular2 erstellen?

<!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>

Bitte machen Sie mir, wie dies zu erreichen.

Quelle

2017-01-11 kirti

Was ist mit dem Anwenden eines Hintergrundbilds auf Komponentenebene statt innerhalb der index.html? Dann könnte jede Komponente ein anderes Hintergrundbild haben. Man könnte sogar eine separate CSS-Datei, die einen Code-Snippet wie folgt enthält:

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

und es in jeder Komponente „styleUrls“, dass Sie das Hintergrundbild angezeigt werden sollen, auf. Verwenden Sie für die Komponenten, für die Sie ein anderes Bild wünschen, ein anderes CSS.

hoffe, das hilft

Quelle

2017-01-11 15:42:33 aholtry

Es ist nicht möglich, gibt es eine 'body' Element nur im Haupt html, sind die anderen nur Sequenzen, die im Inneren des Körpers platziert werden, und in jedem css der Komponenten hinzufügen 'body {..}' sequenz wird nur einige Probleme verursachen, die damit zusammenhängen, wie Elemente angezeigt werden = / –

Wie kann ich verschiedene Hintergrundbilder auf zwei verschiedenen Seiten in angular2 erstellen?

Antwort

Verwandte Themen