Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Posted by A X
A X
12,842 Points

Why do we need to add rgba instead of just the color black?

#overlay 
{
background:black; //Andrew puts the background to black first
background: rgba (0,0,0,0.7); //He then changes it to RGBA without any apparent reason

}

Why is RGBA superior to just saying black as the color in this light box example project? Also, what is alpha (the A) in this context?

2 Answers

Jeremiah Bushau
Jeremiah Bushau
24,061 Points

The A in RGBA allows you to set the opacity of the color. Not necessarily superior, but useful for cases in which you'd also like to set the opacity of the color.

Joel Bardsley
Joel Bardsley
31,246 Points
Joel Bardsley
Joel Bardsley
31,246 Points

The alpha property in the rgba allows you to reduce the opacity of just the background color of an element - the accepted value for this is a number between 0 and 1. With Andrew setting it to 0.7, it's the equivalent of 70% opacity.

In case you're wondering why you'd pick this way over something like this:

#overlay {
  background: black;
  opacity: 0.7;
}

The opacity in the example above would not only affect the background color, but also the opacity of any text or other child elements inside #overlay.