Alpha in CSS

· 2 min read

There are three places in CSS related to transparency settings: Alpha in RGBA, transparent value in color settings, and the Opacity property.

I don’t write styles often, which leads to confusion about these basic concepts. Here I’m organizing and marking them down.

The Meaning of the Word Alpha

Alpha Channel - Specifies the opacity of an object.

I used to think this represented transparency, opposite to opacity. Of course, this understanding is wrong. The reason I was misled is partly because the explanation of this word in some dictionaries is misleading. Below is part of the explanation from Eudic Dictionary when looking up the word.

Unconsciously, one would think that alpha-related settings would be transparency settings, but this is completely wrong.

Looking at authoritative dictionaries like Oxford, the meaning is only the first letter of the Greek alphabet. So why is it related to transparency? I checked the meaning of Alpha channel in WIKI and finally figured it out.

As the Oxford dictionary says, Alpha means the first letter. The person who invented the Alpha channel named it alpha because it was the first channel beyond RGB colors, hence named Alpha. The function of the Alpha channel is image composition. For example, originally it was 255 red, but now the display needs to be multiplied by this alpha value, thus creating a transparency effect. However, understanding it through this formula is actually opacity. So if the alpha value is 0, it’s completely transparent; conversely, if the value is 1, it will be fully displayed.

  • Understanding the above context helps understand one viewpoint online: alpha is not transparency/opacity, it just ultimately creates a transparency effect.

  • But in terms of the function of opacity, alpha in CSS is similar to opacity

alpha/transparent/opacity

  • alpha exists as a value in the RGBA function, and RGBA currently only exists in background-color. Therefore, this opacity setting only serves the background color, and it’s important to know that the opacity of the background color, i.e., the Alpha value, is not inherited.
  • transparent exists in color property settings, its function is equivalent to rgba(0,0,0,0), and the effect will be transparent.
  • opacity is a separate property setting, meaning the opacity of the entire container, including background/text

Final Thoughts

So, CSS can’t be called difficult, but there’s still a lot to learn. Continuing to study.

CSS
Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover

Related