Javascript 如何让css背景图像以角度显示

我正在尝试学习和使用英语。我的依赖关系是

"dependencies": {
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.8.4"
},

我有以下部分：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `<div id='wrapper'>
                <div id='header'></div>
                <div id='logo'></div>
                {{name}}
           </div>`,
styleUrls: ['./src/app/app.component.css']
})
export class AppComponent { name = 'Angular'; }

考虑到所有这些，当页面呈现时，图像的所有空间都会被分配。当我在Chrome developer tools中查看网络流量时，我看到图像以200 OK加载。我甚至可以在开发者工具中点击图像并查看它们。但在屏幕上，只有一个空白页面显示图像

文本“角度”显示在正确的位置。只有背景图像丢失

在开发工具中，我禁用了浏览器缓存

---

如何让我的背景CSS图像显示在我的角度组件中？

你能提供一个问题的工作示例吗？在这里重复一下：你是否尝试过

背景图像

而不是

背景

？而

#header

在DOM中没有内容，在CSS中也没有定义的高度，因此不管怎样，那里都不会显示任何内容。@SteveG。这就成功了。我想我需要的是“背景图像”，而不仅仅是“背景”当使用角度。对于纯HTML，它不需要“-image”。谢谢你。@Steve嗯，真的，这对我来说没什么区别。我不知道您遇到的确切问题，但我只是建议添加

-image

进行调试。在这个Plnkr中，它以你原来的方式工作（我确实必须为你的

#header

元素设置一个高度，但这不应该对

#logo

产生影响），不管怎样，很高兴它为你工作！

#wrapper {
min-height: 100%;
position: relative;
margin-bottom: -30px;
}

#header {
background: url(/Content/Images/cover_background.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#logo {
width: 252px;
height: 207px;
margin: auto;
padding-top: 150px;
padding-bottom: 150px;
background: url(/Content/Images/logo_square_white.png);
background-repeat: no-repeat;
background-position: center;
}