為Angular項目設置完整背景

Question

我嘗試了很多次並搜索了很多關於如何在 angular 項目中為整個應用程序設置圖像背景的信息。

我嘗試了全局 css 和 app.component.css 但它只是為組件區域設置了背景。

這是我的全局 css 文件：

body {
  font-family: 'Vazir';
  background-image: url("assets/back.jpg");
  background-repeat: repeat-y;
  background-position: center;
  background-size: cover;
}

我定義了另一個 css 文件並在 index.html 中鏈接，但效果不佳。我還直接在 index.html 中設置了正文標簽，但我得到了相同的結果。

PS：我不想在 css 文件中設置像素或百分比。

提前致謝

Answer 1

您可以通過以下方式實現它：

1-在根組件中定義一個路由器出口（可能是app.component.html）

<div class="outlet-wrapper">
    <router-outlet></router-outlet>
</div>

2- 在相關樣式文件 (app.component.css/scss) 中，定義：

.outlet-wrapper {
  background-image: url("assets/back.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}