Question

大家好，

我实际上正在学习 Angular2 并且我遇到了...... css问题o_O 我正在寻找类似的问题而没有任何成功，我们走了：

我在main

中有一个body标记元素

我在background-image div中设置main，并使用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中处理函数的名称，您可以根据应用和属性为该属性指定值＃39;逻辑。当然，您可以使用<main [style]="styleHanlder"></main>传递一堆属性，在这种情况下，您需要返回一个对象{attributeName:"value", anotherAttribute:"value"}。

background-size：覆盖w / Angular2

大家好，

1 个答案: