FAQ: CSS Color - Opacity and Alpha


#1

This community-built FAQ covers the “Opacity and Alpha” exercise from the lesson “CSS Color”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Opacity and Alpha

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

When we set background’s opacity (alpha) to lower values, it becomes lighter in our case.
Hence it implies that background of the farthest (in terms of z-index) background is white.

Is it always so? Is there a way to change this behaviour?


#3

yes, but i wouldn’t use lighter as term in this content. I would use more transparent.

0 is complete transparent, while 1 is completely solid. That is the way it is, nothing you can change about it.

transparency is not related to z-index.


#4

Your point stands, but I think I understand what matrenitski is saying.

Since we can change background’s alpha, there’s an implication that there is another unalterable or absolute background on say z-index: -infinity, and that background is inherently set as pure white.

Because of that, if we lower the alpha of our lowest z-index element, white is being introduced into the color mix.

I believe the reality of the question is that we’re building a website on a canvas, and that canvas is white, so no matter what you do on top, the canvas will always be at the bottom.
There is a similar idea in video but in that case, the canvas is black.

Hope that makes sense.