Conversion of integer and Percent values in the Rgba of CSS3

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.