我正在尝试通过使用angular将背景图像应用于div ng-style(我之前尝试过使用具有相同行为的自定义指令),但是它似乎没有用。
ng-style
<nav class="navigation-grid-container" data-ng-class="{ bigger: isNavActive == true }" data-ng-controller="NavigationCtrl" data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true" data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false" data-ng-show="$parent.navInvisible == false" data-ng-animate="'fade'" ng-cloak> <ul class="navigation-container unstyled clearfix"> <li class="navigation-item-container" data-ng-repeat="(key, item) in navigation" data-ng-class="{ small: $parent.isNavActive, big: isActive == true }" data-ng-mouseenter="isActive = true; isInactive= false" data-ng-mouseleave="isActive = false; isInactive= true"> <div data-ng-switch on="item.id"> <div class="navigation-item-default" data-ng-switch-when="scandinavia"> <a class="navigation-item-overlay" data-ng-href="{{item.id}}"> <div class="navigation-item-teaser"> <span class="navigation-item-teaser-text" data-ng-class="{ small: isScandinavia }">{{item.teaser}}</span> </div> </a> <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span> </div> <div class="navigation-item-last" data-ng-switch-when="static"> <div class="navigation-item-overlay"> <div class="navigation-item-teaser"> <span class="navigation-item-teaser-text"> <img data-ng-src="{{item.teaser}}"> </span> </div> </div> <span class="navigation-item-background"> <img class="logo" data-ng-src="{{item.images.logo}}"> </span> </div> <div class="navigation-item-default" data-ng-switch-default> <a class="navigation-item-overlay" data-ng-href="{{item.id}}"> <div class="navigation-item-teaser"> <span class="navigation-item-teaser-text">{{item.teaser}}</span> </div> </a> <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span> </div> </div> </li> </ul> </nav>
不过,如果我尝试使用背景色,则效果似乎很好。我也尝试了远程源和本地源http://lorempixel.com/g/400/200/sports/,但都没有用。
http://lorempixel.com/g/400/200/sports/
正确的语法background-image是:
background-image
background-image: url("path_to_image");
ng-style的正确语法是:
ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">