jQuery 배경 캔버스 투명도

나는 jQuery Background Canvas 플러그인을 사용하고 둥근 모서리와 그라디언트 효과가있는 DIV를 만들었습니다. 그러나 투명성을 확보 할 수 없습니다. 내가 도대체 뭘 잘못하고있는 겁니까? 여기에 자바 스크립트는 다음과 같습니다jQuery 배경 캔버스 투명도

$(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>

을 그리고의 IT에 대한 CSS는 :

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

출처

2010-03-05 Alex

이 라이브러리의 투명 기능을 HTML의 요소에 적용 할 수있는 알파 투명도로 잘못 생각한 것 같습니다. 사실, 이것은 내가 달성하고자하는 알파 투명성입니다. – Alex

같은 문제가 발생했습니다. 내 경우 , 다음 줄 트릭했다 :

$를 ('# [canvasId]')에 .css ('배경 색', '투명');

출처

2013-05-14 07:05:07 seung

솔루션이 jQuery 라이브러리와는 아무 상관이 없습니다; 이것은 불투명도/투명성 CSS 속성입니다. 이 필요했다, IE의 경우

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

: 파이어 폭스와 사파리의 경우,이 트릭을 수행 대부분의 경우

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

, 당신이 당신의 요소에 필터 특성을 적용 할 수 있어야한다; 그러나이 경우 CANVAS 객체에 적용하는 것이 유일한 방법이었습니다.

출처

2010-03-08 14:50:50 Alex

jQuery 배경 캔버스 투명도

답변

관련 문제