jQuery背景画布透明度 [英] jQuery Background Canvas transparency
本文介绍了jQuery背景画布透明度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 jQuery背景画布插件,并创建了带有圆角和渐变效果的DIV.但是,我无法获得透明性.我究竟做错了什么?这是JavaScript:
I'm using the jQuery Background Canvas plugin and have created a DIV with rounded corners and a gradient effect. However, I'm unable to get the transparency to work. What am I doing wrong? Here's the 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);
}
元素本身看起来像这样:
The element itself looks like this:
<div class="Test">
something here
</div>
这是它的CSS:
.Test {
width: 300px;
height: 300px;
}
推荐答案
我遇到了同样的问题. 就我而言,以下代码可以解决问题:
I ran into the same problem. In my case, the following line did the trick:
$('#*[canvasId]*').css('background-color','transparent');
这篇关于jQuery背景画布透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文