Question

I am using fancybox for an image gallery. I am currently trying to set it so the background box as the image changes is semi transparent. I figured out how to add opacity to the css, but it also makes the picture semi-transparent.

This is how I changed the css:

.fancybox-skin {
    position: relative;
    padding: 0;
    margin: 0;
    /*background: #f9f9f9;*/
    background: #111111;
    opacity:0.6;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

Thank you,

CampSoup1988

Answer 1

The easiest would be to only change it for CSS3 browsers by setting an alpha channel background:

background: rgba(17,17,17,0.6); /* equals #111111 at 60% opacity */

And delete your opacity: 0.6. The opacity property causes the element and all its children to have opacity and cannot be recovered from.