adding opacity css to this code

  • Resolved semperaye

    (@semperaye)


    6 years, 10 months ago

    [ Moderator note: moved to Fixing WordPress. ]

    Sorry if this isn’t “advanced,” to me it’s advanced haha. Right now I’ve got this css set to transparent, but want I really wanted was a white semi-transparent background. I do not know how to accomplish this. Can I add something to this code to set opacity?

    Thank you for the help!

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Jacob Peattie

    (@jakept)

    6 years, 10 months ago

    the rgba() value in CSS takes four values, separated by commas. The first 3 are a number between 0 and 255 representing the Red, Green, and Blue values of the colour respectively.

    This page describes what’s going on: http://www.rapidtables.com/web/color/RGB_Color.htm

    The fourth value is opacity. It is a number between 0 and 1. So 0.5 is 50% opacity, 0.25 being 25%, and so on. Combine that with 255,255,255 representing white, and you can get a 50% white background like this:

    background-color: rgba(255,255,255,0.5);

    Just play with the last number to get the opacity to what you want.

    Thread Starter semperaye

    (@semperaye)

    6 years, 9 months ago

    Amazing! I guess that was easy. Thank you Jacob

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘adding opacity css to this code’ is closed to new replies.