2010-03-05 3 views
1

Я использую плагин jQuery Background Canvas и создал DIV с закругленными углами и эффект градиента. Однако я не могу заставить прозрачность работать. Что я делаю не так? Вот JavaScript:jQuery Background Прозрачность холста

$(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; 
} 
+0

Я думаю, что, возможно, я ошибаюсь в прозрачной функциональности этой библиотеки с альфа-прозрачностью, которую вы можете применить к элементам в HTML. На самом деле, это альфа-прозрачность, которую я пытаюсь достичь. – Alex

ответ

1

Я столкнулся с той же проблемой. В моем случае, следующая строка сделал трюк:

$ ('# [canvasId] ') .css (' цвет фона', 'прозрачный');

0

решение не имеет ничего общего с этой библиотекой 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); 
} 

В большинстве случаев, вы должны быть в состоянии применить атрибут фильтра к вашему элементу; но в этом случае единственным способом его работы было применить его к объекту CANVAS.

Смежные вопросы