背景-尺寸：带角度的封面2

Question

我实际上正在学习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;

}

谢谢！

Answer 1

这应该起作用：

<main [style.backgroundSize]="'cover'"></main>

请注意双引号之间的单引号。如果没有它们，cover将被计算为$scope属性（该属性不存在）。您需要将值作为字符串传递。

或者，如果希望控制和动态更改style指令属性的内容，可以只使用

<main [style.attributeName]="styleHanlder"></main>

其中attributeName是任何DOM元素style属性，而stylehanlder是$scope中处理程序函数的名称，您可以根据应用程序的逻辑为该属性赋值。当然，您可以通过使用 传递一组属性，在这种情况下，您需要返回一个对象{attributeName：“value”，anotherAttribute：“value”}。