CSS和角度-背景图像动态加载灰度

Question

Im going to transform picture above like this as background photo in CSS. 我将像上面这样将上面的图片转换为CSS中的背景图片。 Im using angular.My goal is to change photo path for every new item in my list. 我正在使用angular。我的目标是更改列表中每个新项目的照片路径。 For now on styles are hardcode, so image is constant, and everything is working. 目前，样式是硬编码，因此图像是恒定的，并且一切正常。

When I try to change image by 当我尝试通过更改图像

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

it is changing, but without greyscale and opacity etc. 它正在变化，但是没有greyscale and opacity等。

Image: 图片： 在此处输入图片说明

Fiddle here . 在这里摆弄。

Answer 1

I did what you want to do with HTMl 我做了你想用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 的CSS

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

Working DEMO on fiddle : https://jsfiddle.net/ctu88jdj/17/ 在小提琴上工作的演示： https : //jsfiddle.net/ctu88jdj/17/

I hope this will help you 我希望这能帮到您

CSS和角度-背景图像动态加载灰度

问题描述

1 个解决方案

解决方案1
0 2015-07-10 11:18:47

CSS和角度-背景图像动态加载灰度

问题描述

1 个解决方案

解决方案1 0 2015-07-10 11:18:47

解决方案1
0 2015-07-10 11:18:47