jcrop zamienia przezroczysty obraz czarny

Question

Chciałbym użyć jcrop do wybrania obszaru na coś, co ma wbudowane javascript, którego nie mogę zmodyfikować. Ten javascript ingeruje w myśl jcrop. więc próbowałem umieścić przezroczysty gif na szczycie rzeczy, którą chciałbym wybrać. To zatrzymało rzecz pod zakłócaniem jcrop i ja wybrałem obszary dobrze. Jcrop jednak sprawia, że ​​przezroczysty obraz jest czarny, a nie przezroczysty.

Oto jsfiddle http://jsfiddle.net/andieje/rvTmX/

To html

  <img id="cropbox" src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" style="position: absolute; left: 0px: right: 0px;" /> 
<img id="transparent" src="http://www.golivetutor.com/download/spacer.gif" style="width: 100px; height: 100px;position: absolute; left: 0px: right: 0px;"/> 

To tylko pokazuje, przejrzystego obrazu umieszczonego na jcrop i jak staje się czarny.

Czy jest jakiś sposób obejść to? Nie wiem zbyt wiele informacji o css, ale nie przejmuję się, jeśli modyfikacja oznacza, że ​​niewybrany obszar obrazu nie jest już wyszarzony - po prostu potrzebuję prostokąta wokół wybranego bitu.

dzięki bardzo za wszelką pomoc można dać

Answer 1

To dlatego, że opcja domyślna dla bgColor w jCrop jest ustawiony na 'czarne'.

Wystarczy dodać opcję bgColor w init nic a obraz będzie przezroczysty:

$('#transparent').Jcrop({ 
    onChange: showCoords, 
    bgColor: '' 
},function(){ 
    jcrop_api = this; 
}); 

Answer 2

Tu jest rozwiązanie (link). Zmieniłem obraz na div z przezroczystym kolorem za pomocą rgba (0,0,0,0). Daj mi znać, jeśli chcesz to osiągnąć.

<div id="transparent" style="width: 100px; height: 100px;position: absolute; left: 0px: right: 0px; background: rgba(0,0,0,0);"/>