I love messing with opacity, when alpha opacity filters began to be supported in the early 2000s I was a very happy girl. However, the filter was limiting because it would apply to everything within that element.
The next solution was transparent pngs to get the look of a transparent background color.
However, I recently discovered rgba redering both solutions unnecessary when it comes to using alpha opacity on colors. Setting rgba is easy:
The first three numbers are the rbg code for the color, and the last number is 0-1 setting of the alpha opacity.
rbga can be applied to backgrounds
<span style=”padding:20px;color:#FFFFFF;background-color:rgba(255,0,0,0.5);”>rbga can be applied to backgrounds</span>
It can be applied to colors
<h4 style=”color:rgba(0,255,255,0.5) !important;”>It can be applied to colors</h4>
<textarea style=”background-color: rgba(255,0,0,0.25)”>form elements</textarea>
<span style=”border: solid 10px rgba(0,255,255,0.25);”>and borders!</span>
Any place in css where color can be defined rgba can be used to code the color. If you’re like me and in love with hexadecimal, there are a bunch of handy converters.