Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the example analysis of the conversion of integers and percentages in CSS3's RGBA. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

How to convert integers to percentages

As mentioned earlier, using percentage values instead of integer values to represent the amount of red, green, and blue primary colors, the final result is the same. 0 represents 0%, and 255 represents 100%. To make the percentage equivalent, you just need to divide the integer value by 255 and multiply it by 100%.

In the above example, if the RGBA color value is rgba (255, 242, 0, 0, 0. 5), then

CSS

Red: (255amp 255) x 100% = 100%

Green: (242amp 255) x 100% = 94.9%

Blue: (0max 255) x 100% = 0%

Alpha: 0.5

Color: rgba (100%, 94.9%, 0%, 0.5)

Results:

How to convert a percentage to an integer

In fact, all you have to do is to turn the above upside down, that is, multiply the percentage by 255 and then by 100% (that is, multiply by 255 and remove the percent sign)

Let's take an orange example:

CSS

Rgba (100%, 64.7%, 0%, 1)

Results:

CSS

Red: (100% x 255) / 100% = 255

Green: (64.7 x 255) / 100% = 165( rounded to the nearest integer)

Blue: (0% x 255) / 100% = 0

Alpha: 1

The values converted to integers are:

CSS

Rgba (255,165,0,1)

Browser support

RGBa colors are now supported in Webkit and Gecko core browsers, but not in all versions of IE browsers and Opera. As Chris mentioned in his wonderful article on RGBa, you can use a standard RGB color to specify a backward compatible property for browsers that are not supported.

CSS

Div {

Background: rgb (200,54,54); / * The Fallback * /

Background: rgba (200,54,54,0.5)

}

Another example of gradual enhancement or moderate downgrade.

After reading the above, do you have any further understanding of the example analysis of integer and percentage conversion in CSS3's RGBA? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.