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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
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?
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.
Alpha can only be used with HSL and RGB colors; we cannot add the alpha value to color: greencolor: #FFFFF
Alpha is added to hex code colours by addition of a seventh and eight digit to represent the percentage of alpha transparence. IE #7e7e7e80, equivelant to grey at 50% alpha transparence.
I suppose you could make a ‘mybackground’ element that is any color you choose for the base color of the ‘canvas’ then put ‘background’ colors on top of that so that as you increase transparency of any given background element it would approach the color you chose for your ‘mybackground’
Why in theory it says: "To use opacity in the HSL color scheme, use hsla instead of hsl , and four values instead of three. For example: color: hsla(34, 100%, 50%, 0.1); to use value - color. Then by that to get correct answer it is necessery only to add (a) letter and 0.6 an alpha values, anyway to pass the 1 task you have to use value background-color:
{
background-color: hsla(325, 50%, 50%, 0.6); ?
I understand it is not such a big difference but it is confusing. If anyone has explanation I would be grateful.
hsl and hsla seem to be two different functions with a different amount of parameters. Its also more explicit, so when reading the code you know when o-capacity/alpha is being used.
Thanks for mentioning this … I was surprised at seeing it too. Transparency has been present in hex for over a decade, not sure what the author was thinking.
hsla and rgba alpha values changed the colors opacity to appear lighter when using a value below 1.
Zero, 0 opacity is the most transparent. Blue appears gray after setting the alpha value to 0.4 opacity and background alpha value to 0.1 opacity.
Hello!
The syntax for use of rgb() and hsl() to use fourth value as alpha changed recently with W3C integrating the changes in the css color module. You can read the whole document but to answer your question, instead of:
background-color: hsla(325, 50%, 50%, 0.6); or
color: rgba(234, 45, 98, 0.33);
it seems acceptable to use:
hsl(325 50% 50% / 0.6); or
rgb(234 45 98 / 0.33)
) below.
) to up-vote the contribution!