背景尺寸：带 Angular2 的封面

Question

大家好，

我实际上正在学习 Angular2，但我遇到了一个 ...css 问题 o_O 我正在寻找类似的问题，但没有成功，我们开始吧：

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

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

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

供您参考：我使用 styleUrls 在组件中注入 css 规则

代码

身体 { 宽度：100vw； 高度：100vh； 溢出-x：隐藏； 显示：-webkit-box； 显示：-ms-flexbox； 显示：弯曲； -webkit-box-orient：垂直； -webkit-box-direction：正常； -ms-flex-direction：列； 弹性方向：列； -webkit-box-align：居中； -ms-flex-align：居中； 对齐项目：居中； -webkit-box-pack：中心； -ms-flex-pack：中心； 证明内容：中心； } 主要的 { 颜色：#fff; 位置：相对； 宽度：90%； 高度：90%； 内边距：30px； 显示：-webkit-box； 显示：-ms-flexbox； 显示：弯曲； -webkit-box-orient：垂直； -webkit-box-direction：正常； -ms-flex-direction：列； 弹性方向：列； -webkit-box-align：居中； -ms-flex-align：居中； 对齐项目：居中； 背景尺寸：封面； 背景：url(../assets/fond.jpg) 不重复； 框阴影：30px 3px 36px -15px 灰色，-30px 3px 36px -15px 灰色； }

谢谢！

Answer 1

这应该有效：

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

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

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

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

其中attributeName 是任何DOM 元素style 属性，styleHanlder 是$scope 中处理程序函数的名称，您可以根据应用程序的逻辑为该属性分配值。当然，你可以使用<main [style]="styleHanlder"></main>传递一堆属性，在这种情况下你需要返回一个对象{attributeName:"value", anotherAttribute:"value"}。