Question

我想用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，但如果修改意味着图像的未选区域不再灰显，我就不会感到困扰 - 我只想在所选位周围使用有界矩形。

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

Answer 1

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

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

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

Answer 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);"/>

jcrop将透明图像变为黑色

2 个答案: