Conversion of integer and Percent values in the Rgba of CSS3

Source: Internet
Author: User
Tags integer

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.