我将像这样将上面的图片转换为 CSS 中的背景照片。我正在使用 angular。我的目标是更改列表中每个新元素的照片路径。现在样式是硬编码的，所以图像是不变的，一切正常。
当我尝试通过以下方式更改图像时
style="background: url({{item.photo_path}})"
它正在改变，但没有灰度和不透明度等。
图片:
fiddle here .
最佳答案
我做了你想做的事 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>
Controller
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);
}
fiddle 上的工作演示:https://jsfiddle.net/ctu88jdj/17/
希望对你有帮助
关于jquery - css & angular - 使用灰度动态加载背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31338308/