jcrop dreht sich transparent Bild schwarz

Question

Ich würde gerne jcrop verwenden, um einen Bereich auf etwas zu wählen, das in Javascript eingebaut hat, das ich nicht ändern kann. Dieses Javascript stört jcrop ich denke. Also habe ich versucht, ein transparentes Gif über das Ding zu legen, das ich auswählen möchte. Dies stoppte das Ding darunter störte jcrop und ich konnte Bereiche gut auswählen. Jcop macht das transparente Bild jedoch eher schwarz als transparent. Hier

ist ein jsfiddle http://jsfiddle.net/andieje/rvTmX/

Dies ist der 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;"/> 

Dies zeigt nur ein transparentes Bild verknüpft jcrop und wie es wird schwarz.

Gibt es eine Möglichkeit, dass ich das umgehen könnte? Ich weiß nicht viel CSS, aber ich bin nicht gestört, wenn die Änderung bedeutet, dass der nicht ausgewählte Bereich des Bildes nicht mehr ausgegraut ist - ich möchte nur das begrenzte Rechteck um das ausgewählte Bit.

vielen Dank für jede Hilfe Sie

Answer 1

Das liegt daran, dass die Standardoption für bgColor in jCrop zu 'schwarz' gesetzt ist.

Fügen Sie einfach die Option für bgColor in Ihrer init sein wird nichts und Ihr Bild transparent sein:

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

Answer 2

Hier geben kann, ist die Lösung (link). Ich habe das Bild mit rgba (0,0,0,0) in ein div mit transparenter Farbe geändert. Lassen Sie mich wissen, wenn Sie das erreichen möchten.

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