我实际上正在学习Angular2,但我遇到了一个...CSS问题o_O我曾搜索过一个类似的问题,但没有任何成功,现在开始：

我在body中有一个main标记元素

我在maindiv中设置了background-image并使用background-size:cover来适应，但似乎根本不起作用，图片不适合div。

我很困惑因为这是第一次发生在我身上

请参阅：我使用styleUrls在组件中注入css规则

代码

body {

    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

main {

    color: #fff;
    position: relative;
    width: 90%;
    height: 90%;
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-size: cover;
    background: url(../assets/fond.jpg) no-repeat;
    box-shadow: 30px 3px 36px -15px grey, -30px 3px 36px -15px grey;

}

谢谢！