jcrop 将透明图像变为黑色答案

【问题标题】：jcrop turns transparent image blackjcrop 将透明图像变为黑色
【发布时间】：2013-08-21 14:12:17
【问题描述】：

我想使用 jcrop 在我无法修改的内置 javascript 的东西上选择一个区域。我认为这个 javascript 正在干扰 jcrop。所以我试着在我想选择的东西上面放一个透明的 gif。这阻止了下面干扰 jcrop 的东西，我可以很好地选择区域。然而，Jcrop 使透明图像变黑而不是透明。

这是一个 jsfiddle http://jsfiddle.net/andieje/rvTmX/

这是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;"/>

这只是显示链接到 jcrop 的透明图像以及它是如何变黑的。

有什么办法可以解决这个问题吗？我不太了解 css，但如果修改意味着图像的未选择区域不再变灰，我不介意 - 我只想要选定位周围的有界矩形。

非常感谢您提供的任何帮助

【问题讨论】：

标签： jquery jcrop

【解决方案1】：

这是因为 jCrop 中 bgColor 的默认选项设置为“黑色”。

只需在您的 init 中添加 bgColor 选项即可，您的图像将是透明的：

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

【讨论】：

或者像这样设置它的不透明度：.jcrop-holder { opacity: 0.5; }jsfiddle.net/sperske/rvTmX/5
是的，但是你需要设置更多的不透明度参数来支持跨浏览器。并且还可以在init中添加bgOpacity选项。
似乎得到了很好的支持：caniuse.com/css-opacity 但 bgOpacity 肯定会消除所有疑问 :)
初始化中的 bgOpacity 不会改变在具有透明像素 (png) 的图像上使用 jcrop 将呈现黑色矩形的事实
使用 .jcrop-holder { opacity: 0.5; } 也会改变图像的不透明度。

【解决方案2】：

这是解决方案 (link)。我使用 rgba(0,0,0,0) 将图像更改为具有透明颜色的 div。让我知道这是否是您想要实现的目标。

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

【讨论】：