Angular 5 w/Angular Material 2 - 加载背景的最佳方式？答案

【问题标题】：Angular 5 w/ Angular Material 2 - Optimal Way to load a background?Angular 5 w/Angular Material 2 - 加载背景的最佳方式？
【发布时间】：2018-02-07 07:20:46
【问题描述】：

我想知道使用 Angular Material 2 向我的 Angular 5 应用程序的 app.component 添加背景的最佳方法是什么。我在以前版本的 Angular 中看到过一些关于此的堆栈溢出帖子并尝试使用他们，但无济于事。

所以我想看看在 Angular 5 w/Angular Material 2 中目前推荐的方法是什么。

谢谢

此组件中图像的路径“../../images/background.jpg”

<div [class.app-dark-theme]="true">
    <mat-sidenav-container fullscreen class="sidenav-container">
        <!-- The Navigation button at the top of the application -->
        <mat-toolbar color="primary">

            <div class="select-discord">
                <mat-icon svgIcon="thumbs-up"></mat-icon> Discord
            </div>

            <div class="select-twitch">
                <mat-icon svgIcon="thumbs-up"></mat-icon> Twitch
            </div>

            <div class="select-twitter">
                <mat-icon svgIcon="thumbs-up"></mat-icon> Twitter
            </div>

            <div class="select-youtube">
                <mat-icon svgIcon="thumbs-up"></mat-icon> YouTube
            </div>

        </mat-toolbar>

        <img class="img-responsive" src="../../images/background.jpg">

        <!-- Main content of the website -->
        <div class="app-content">
            <mat-card>
                text here
            </mat-card>
        </div>
    </mat-sidenav-container>
</div>

【问题讨论】：

您想为哪个元素应用背景？
使用background-image css 属性有什么问题吗？
@WebDevBooster 我希望它完全在后台，这样我就可以在导航栏和其他所有内容上保持适度的不透明度。
@RoddyoftheFrozenPeas 我只是想在 Angular 5 中使用 Material 2 找到推荐的方法，仅此而已。我知道如何在您的标准纯 html 和 css 网站中执行此操作，但我更喜欢学习推荐的做事方式:)
这两个都建立在 HTML 和 CSS 之上。 Material-2 专门告诉您使用 CSS 设置样式。是什么让您认为这不是推荐的方式？

标签： html css angular angular-material2

【解决方案1】：

添加背景的正确方法是向容器添加一个 id，并为该 id 赋予以下 css 规则：

#my-bg {
    background: url('../../images/background.jpg') no-repeat center;
    background-size: cover;
}

【讨论】：

好吧，不太确定这里是否有特定的角度要做，而不仅仅是纯 css/html