Transparent Background

  • Resolved semperaye

    (@semperaye)


    7 years, 8 months ago

    Hello,

    I was wondering how I can set the transparency or opacity of the default white background of the fancy box when having a transparent png image pop up with the easy fancy box. Please see the “Explore” button on test.salamatphilippines.com.

    Thanx!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi, try adding these style rules to your custom CSS:

    
#fancybox-content, #fancybox-outer {
    background-color: rgba(0,0,0,0);
    border-color: rgba(0,0,0,0);
    box-shadow: none;
}

    but be aware that all will show through including texts and header image, making it rather confusing for your visitors to know what is is what…

    Thread Starter semperaye

    (@semperaye)

    Wow thanks! Is there anyway to set opacity instead? So that it’s only semi transparent?

    yes, change the last zero or the rgba code to a value between 0 (full transparency) and 1 (fully opaque). for example 0.4

    or use an online color tool like https://www.css3maker.com/css-3-rgba.html to play with and get the perfect rgba value for your needs ??

    Thread Starter semperaye

    (@semperaye)

    Here is the code I used sir. Thank you very much! I’m really happy with how it turned out ??

    #fancybox-content, #fancybox-outer {
    background-color: rgba(255,255,255,0.6);
    border-color: rgba(0,0,0,0);
    box-shadow: none;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Transparent Background’ is closed to new replies.