jQuery фон холст прозрачность - PullRequest
Новая
       18

jQuery фон холст прозрачность

1 голос
/ 05 марта 2010

Я использую плагин 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;
}

Ответы [ 2 ]

2 голосов
/ 14 мая 2013

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

$('#*[canvasId]*').css('background-color','transparent');
0 голосов
/ 08 марта 2010

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

...