IE CSS compositor filter

[Verwijderd]

Ik wil (IE only) een aantal plaatjes over elkaar leggen met blend mode "lighten" (zo heet het equivalent in photoshop)

Nu is er het compositor filter, wat je via css aan een container kan hangen:

HTML:

<style type="text/css">
#canvas {
  filter: progid:DXImageTransform.Microsoft.Compositor(function=2[s][/s]);
  position: absolute;
}
</style>
<div id="canvas">
  <img src="plaatje1">
</div>

vervolgens kan ik de apply() method aanroepen, de inhoud veranderen en de play() method aanroepen in het kort:

JavaScript:

  var canvas = document.getElementById('canvas');
  canvas.filters.item(0).apply();
  //verander de src van het plaatje
  canvas.filters.item(0).play();

dat werkt, 2 plaatjes over elkaar met blend mode lighten (je kan ook ander dingen kiezen).

Maar nu wil ik meer ( ) meer plaatjes dus. Alleen die compositor lijkt het maar met 2 dingen te doen. Als ik opnieuw iets verander en weer play() doe, neemt ie het allereerste snapshot mee (die heeft ie gemaakt toen ik apply() deed), en de allerlaatste (van de laatste play(). Tussendoor een extra apply() maakt een nieuw eerste snapshot, maar dan neemt ie het allereerste weer niet mee

any bright ideas?

msdn info: http://msdn2.microsoft.com/en-us/library/ms532984.aspx

[_Thanatos_]

How about een PNG overlay

[Verwijderd]

gaat niet werken, die lighten blend mode is belangrijk hier, dat red je niet met png.

Maar ik heb inmiddels de oplossing, namelijk meerdere keren het filter toepassen, die worden dan gezien als aparte filters

HTML:

<style type="text/css">
#canvas {
  filter: progid:DXImageTransform.Microsoft.Compositor(function=2)
          progid:DXImageTransform.Microsoft.Compositor(function=2);
  position: absolute;
}
</style>
<div id="canvas">
  <img src="plaatje1">
</div>

JavaScript:

  var canvas = document.getElementById('canvas');
  canvas.filters.item(0).apply();
  //verander de src van het plaatje
  canvas.filters.item(0).play();
  canvas.filters.item(1).apply();
  //verander de src van het plaatje weer
  canvas.filters.item(1).play();