Question

我要像CSS一样将上面的图片转换为背景照片。我正在使用angular.My的目标是更改列表中每个新项目的照片路径。目前，样式是硬编码，因此图像是恒定的，一切都在工作。

当我尝试通过

更改图像时

style="background: url({{item.photo_path}})"

它正在改变，但没有greyscale and opacity等。

图片： enter image description here

小提琴here。

Answer 1

我做了你想做的事 HTML

<body ng-app="app">
<div ng-controller="MyController" class="ibox blog background-photo" >
    <div  ng-repeat="element in events">
        <img ng-src="{{element.path}}" class="desaturate"/>
    {{element.path}}
    </div>
  </div>

控制器

var modul = angular.module('app', []);

modul.controller('MyController', function($scope){

    $scope.events = [{path: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQHlKwDrqoGMi34rBHhCCzweO5GoedRt2U2iA_UBQfx1VZcKGkkPw'}];
});

CSS

img.desaturate{
-webkit-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
}

在小提琴上工作DEMO：https://jsfiddle.net/ctu88jdj/17/

我希望这会对你有所帮助

css＆amp;角度 - 使用灰度动态加载背景图像

1 个答案: