Monday - Alpha

Alpha is a way of talking about the transparency of a color. It can be used either with HSL or RGB color values - though as I have said repeatedly in this class, my expectation is that you will default to using HSL. When adding an alpha setting to a color, you will need to change the way you enter the property into CSS.

Normally, to assign an HSL color to a selector, you would type something like:

And that would assign a background color of red with 100% saturation. To make it semi-transparent, we need to add a fourth value - alpha - to that declaration. To make the background 80% opaque (20% transparent), we'd do the following:

You can do something similar with background images (or any image, really). If, for example, you have an image that is too high in contrast for your text, you can assign a background color that is the opposite of your text color (for maximum contrast) and then lay a semi-transparent background image on top of it.

That's not technically done with an alpha setting, however, and the coding of it can get complex. It is not something I have included in the class in the past for that reason, but if there is significant student interest I can see about putting it into the course. As a fair warning, it would not be included until the final month of the class, when we're addressing more advanced techniques.