我试图获得一个部分透明的矩形,其中左侧部分是不透明的,而如果你进入那个方向,右侧部分会更透明。
这适用于 Firefox、Chrome,但不适用于 Internet Explorer 7 或 IE8。在 IE 中,所有矩形都以相同的透明渐变显示。
function drawTest(y, pct) {
var recttest = paper.rect(25,y,100,30);
var gradstr = "0.0-#db38cc:5-#db38cc:"+pct;
recttest.attr({"fill": gradstr,"opacity": "0.01"});
}
$(document).ready(function() {
paper = Raphael(10,100, 400, 400);
drawTest(0, 30);
drawTest(50, 40);
drawTest(100, 50);
drawTest(150, 60);
drawTest(200, 70);
drawTest(250, 80);
});
有关上述代码运行的示例,请参见此处。
那么我该如何为 IE 解决这个问题呢?请注意,我想将矩形放在图像顶部,因此它必须是透明的(不是白色的)。