Question

我正在使用jQuery Background Canvas插件并创建了一个带圆角和渐变效果的DIV。但是，我无法获得透明度。我究竟做错了什么？这是JavaScript：

$(document).ready(function()
{
$(".Test").backgroundCanvas();
$(".Test").makeElementTransparent("#CECFCE");
$(".Test").backgroundCanvas(true, "#CECFCE");
});

function DrawBackground() {
$(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt);
}
// Draw the background on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });

function TestBackgroundPaintFkt(context, width, height, elementInfo)
{
var options = {x:0, height: height, width: width,
radius:7, border: 0 };
// Draw the red border rectangle
context.fillStyle = "#CECFC6";
$.canvasPaint.roundedRect(context,options);
// Draw the gradient filled inner rectangle
var backgroundGradient = context.createLinearGradient(0, 0,
0, height - 10);
backgroundGradient.addColorStop(0 ,'#F7F7EF');
backgroundGradient.addColorStop(1, '#CECFCE');
options.border = 1;
context.fillStyle = backgroundGradient;
$.canvasPaint.roundedRect(context,options);
}

元素本身如下：

<div class="Test">
   something here
</div>

这是它的CSS：

.Test {
    width: 300px;
    height: 300px;
}

Answer 1

我遇到了同样的问题。就我而言，以下一行就是诀窍：

$('#*[canvasId]*').css('background-color','transparent');

Answer 2

该解决方案与此jQuery库无关;它是不透明度/透明度的CSS属性。对于Firefox和Safari，这可以解决问题：

.Test {
   -moz-opacity:0.5; /* For older FF versions */
   -khtml-opacity:0.5;
   opacity:0.5;
}

对于IE，这是必要的：

canvas.jbgCanvas {
   filter:alpha(opacity=50);
}

在大多数情况下，您应该能够将filter属性应用于元素;但在这种情况下，它唯一的工作方式是将它应用于CANVAS对象。

jQuery背景画布透明度

2 个答案: