如何将 Angular 应用程序的背景设置为图像？

Posted 2023-03-06

【中文标题】如何将 Angular 应用程序的背景设置为图像？

【英文标题】：How to set the background of an Angular app to an image?

【发布时间】：2021-01-20 20:09:58

【问题描述】：

在我的 app.component.css 我有

.container
    background-image: url(/image.jpg);

在 app.component.html 我有

<div class="container">
    <h1>image</h1>
</div>

我很困惑这不起作用。有没有更好的方法为应用设置背景图片？

【问题讨论】：

你的文件夹结构是什么？图像在同一个文件夹中吗？如果它与您的 html 位于同一文件夹中，则它应该是 url("image.jpg")

你的图片在哪里。我希望它至少在 src 中。因为您的角度应用程序根目录将是 src 文件夹。如果你愿意，你可以把它放在资产中。是的，我说的是角度 2+。

【参考方案1】：

我在Stackblitz 上为您创建了一个示例

尝试像这样使用background：

app.component.css

.img 
  background: url(imgage-url-address-here);
  height: 480px;

app.component.html

<p class="img">
  Start editing to see some magic happen :)
</p>

【参考方案2】：

Demo你也应该设置它的宽度和高度

.container
    background-image: url(/image.jpg);
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: cover;

你还在styles.css中设置了html和boys的宽度和高度

html,body
  width:100%;
  height: 100%;
  margin:0 auto;