css - Angular 、背景图像和背景位置

Question

我正在努力使用 ng-style 添加额外的 background 样式。我想要做的事情的想法是使用 ng-repeat 制作一个扬声器网格，每个网格元素都有自己的扬声器图像。这很好，只是我希望图像成为 背景，虽然我可以成功地让图像反射(reflect)出来，但我无法为 background-position 添加 css & 背景大小。我正在做的事情的基础是 here ，但问题是我尝试使用内联样式失败:

代码:

<div class="grid" ng-repeat="speaker in home.speakers">
   <div class="grid-image" ng-style="{'background':'url({{speaker.img}})' 'center center' '/' 'cover'}"></div>
   <span class="caption"><h3>{{speaker.name}}</h3></span>
</div>

我已经尝试过各种可以想象的单引号，但仍然收到控制台错误，它不知道我要做什么。我也试过在单独的类中设置 background size 和 background position ，但这不起作用，因为图像没有用它声明。我真的在这里不知所措，虽然我假设我不会是第一个尝试这个的人，但我只是发现没有任何帮助。

Answer 1

因为您正在使用 background-image 并应用 shorthand对于 background，所以在这里:

ng-style="{'background-image':'url({{speaker.img}})' 'center center' '/' 'cover'}">

更改为:

ng-style="{'background-image':'url({{speaker.img}})', 'background-position': 'center center', 'background-size': 'cover'}">