Fancybox:不透明问题 [英] Fancybox: problems with opacity

问题描述

我对以下语法/代码不起作用了吗?

am I right that the following syntax/code doesn't work (anymore)?

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            opacity : 0.9,
            css : {
                'background-color' : '#f00' 
            }
        }
    }
});

检查一下: http://jsfiddle.net/jRsjK/3375/

...但是只有这个吗?

... but only this?

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background-color' : 'rgba(255, 0, 0, .9)'
            }
        }
    }
});

检查一下: http://jsfiddle.net/jRsjK/3374/

推荐答案

如果使用的格式为rgba(255, 0, 0, .9)，则css属性应为background，而不是上述示例代码中的background-color.然后您的脚本应如下所示:

If you are using the format rgba(255, 0, 0, .9) then the css property should be background, not background-color as in your example code above. Then your script should look like :

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(255, 0, 0, .9)'
            }
        }
    }
});

...请参见 JSFIDDLE (我设置了较低的不透明度值使其更加明显)

... see JSFIDDLE (I set a lower opacity value to make it more obvious)

请记住，如果您未设置任何background属性，fancybox将使用半透明的 .png 图像作为背景(fancybox_sprite.png).如果设置了background-color属性(如上面的示例中所示)，则仍将使用 png 精灵，它可能会影响您要查找的不透明度效果.

Bear in mind that if you don't set any background property, fancybox will use a semitransparent .png image as background (fancybox_sprite.png). If you set the background-color property (as in your examples above), the png sprite still will be used and may affect the opacity effect you are looking for.

overlay的opacity API选项似乎已从2.1.x版本(最近使用的是v2.0.6版本)中删除

It seems like the opacity API option for the overlay was removed since version 2.1.x (last used was v2.0.6)

这篇关于Fancybox:不透明问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！