Question

我有一个列表，哪些项目获得默认背景图片：

.defaultListItem > .item-content  {
    background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('../images/BGCardboard.png') no-repeat;
    background-size: cover;
    color: rgb(255,255,255);
}

现在我想从我的控制器动态更改背景图像。

模板：

<ion-item class="defaultListItem" ng-repeat="item in items >
     <img ng-src="item.img">
           <div class="itemInfo">
               ....
           </div>
</ion-item>

控制器：

app.controller('home', function($scope, $items){
     $scope.items = $items.getItems();

     //check items, and if there's a background-image, set it to the list
     for(item in items)
          if(item.backgroundImage)
              //manipulate css background-image anyhow
});

我不知道如何设置背景图片。有什么想法吗？

以下是您可以试用的fiddle。

Answer 1

您正在使用Ionic Framework，这很好但添加了难以定位的图层。（.item-content DIV不在你的模板中 - 看起来像Ionic正在提供这个......）

但是，无论如何，如果您愿意在DOM中调整需要此背景图像的位置，则可以轻松地在Angular中设置它们。您可以使用ngStyle属性，也可以直接在style属性中使用表达式。（两者都有优点 - 表达式很简单，但ngStyle允许你用多个属性做复杂的事情。）

<div style="background-image: url({{ myImageUrl }})"></div>

AngularJS操纵css中的背景图像集

1 个答案: