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' 
            }
        }
    }
});

check it out: http://jsfiddle.net/jRsjK/3375/

... but only this?

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

check it out: http://jsfiddle.net/jRsjK/3374/

回答1:

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)'
            }
        }
    }
});

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

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.

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

来源：https://stackoverflow.com/questions/15090795/fancybox-problems-with-opacity