本文介绍了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背景画布透明度
发布评论