css＆angular - 用灰度動態加載背景圖像

我將在CSS中將上面的圖片轉換爲背景圖片。我使用angular.My的目標是改變我列表中每個新項目的照片路徑。現在風格是硬編碼，所以圖像是恆定的，並且一切正常。css＆angular - 用灰度動態加載背景圖像

當我試圖通過

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

它正在改變改變形象，但沒有greyscale and opacity等

圖片： enter image description here

小提琴here。

來源

2015-07-10 Janko

這是你想要做什麼？ https://jsfiddle.net/ctu88jdj/14/ –

我嘗試在灰度CSS類中覆蓋硬編碼圖像URL。問題是在類中聲明的過濾器不工作，當我使用內聯樣式來做到這一點。回答我期望的是用工作過濾器替換背景圖像的方法 – Janko

我沒有你想的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); 
}

工作演示的小提琴做的：https://jsfiddle.net/ctu88jdj/17/

我希望這會幫助你

來源

2015-07-10 11:18:47

您的方法非常接近。解決方法是： – Janko

解決方案是.. ?? –

你的方法非常接近。解決方法是：把另一個div放在'position：absolute;頂部：0;寬度：100％;背景：url（''）;'在div下面有相對位置的內容; background：transparent;'這會導致後臺url可以動態更改，樣式將被保存。 – Janko

css＆angular - 用灰度動態加載背景圖像

回答

相關問題