V How to convert integers to percentages
As mentioned earlier, the amount of red, green, and blue primary colors is represented by using a percentage value instead of integer values, and the result is the same. 0 represents 0%,255 100%. To make the percentages equal, you just have to divide the integer value by 255 and multiply by 100%.
In the example above, if the Rgba color value is Rgba (255,242,0,0.5), then
CSS code copy content to clipboard
Red: (255/255) x 100% = 100%
Green: (242/255) x 100% = 94.9%
Blue: (0/255) x 100% = 0%
alpha:0.5
Color:rgba (100%, 94.9%, 0%, 0.5);
Results:
How to convert percentages to integers
In fact, as long as the top of the upside, that is, the percentage value multiplied by 255, and then multiplied by 100% (that is, multiplied by 255 minus the percent sign)
Here's an orange example:
CSS code copy content to clipboard
Rgba (100%, 64.7%, 0%, 1)
Results:
CSS code copy content to clipboard
Red: (100% x 255)/100% = 255
Green: (64.7% x 255)/100% = 165 (rounded to nearest integer)
Blue: (0% x 255)/100% = 0
Alpha:1
The values converted to integers are:
CSS code copy content to clipboard
RGBA (255, 165, 0, 1)
Browser support
RGBA colors are now supported in the WebKit and Gecko core browsers, and browsers and opera are not supported by IE versions. As Chris mentioned in his wonderful article about RGBA, you can use a standard RGB color to specify a backward-compatible attribute for browsers that are not supported.
CSS code copy content to clipboard
div {
Background:rgb (200, 54, 54); * * the fallback * *
Background:rgba (200, 54, 54, 0.5);
}
Another example of progressive enhancement or moderate demotion.