How many values does rgba in css have?-Front-end Q&A-php.cn

How many values does rgba in css have?

醉折花枝作酒筹

Release： 2023-01-06 11:15:15

Original

3969 people have browsed it

In CSS, rgba has four values, namely red (R), green (G), blue (B), and transparency (A). A wide variety of colors can be obtained by changing the channels and adding them to each other. The RGBA color standard includes almost all colors that can be perceived by human vision and is one of the most widely used color systems currently.

How many values does rgba in css have?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

What does rgba mean?

RGBA: A color mode, a color standard in the industry; it can be used to change the four color channels of red (R), green (G), blue (B), transparency (A) and They are superimposed on each other to obtain a variety of colors. The RGBA color standard includes almost all colors that can be perceived by human vision and is one of the most widely used color systems currently.

How many values does rgba in css have?

In css we can use the RGBA standard to set color values, which requires the use of the css rgba() function. Let’s learn about rgba related knowledge.

CSS rgba() function

rgba() function uses the superposition of four colors: red (R), green (G), blue (B), and transparency (A) to generate various Various colors.

Syntax

rgba(red, green, blue, alpha)

Copy after login

rgba() function has four values, namely:

red defines the red value, the value range is 0 ~ 255 , you can also use percentages 0% ~ 100%.
green defines the green value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.
blue defines the blue value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.
Transparency (A) has a value between 0 and 1, representing transparency.

Example: Use rgba() function to set color

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      body {
        background: rgba(192, 192, 192);
      }
      #p1 {
        background-color: rgba(255, 255, 255);
      }
      #p2 {
        background-color: rgba(0, 255, 0);
      }
      #p3 {
        background-color: rgba(0, 0, 255);
      }
      #p4 {
        background-color: rgba(0, 0, 0,0.5);
      }
      #p5 {
        background-color: rgba(255, 255, 0);
      }
    </style>
  </head>

  <body>
    <p>RGBA 颜色:</p>
    <p id="p1">白色</p>
    <p id="p2">绿色</p>
    <p id="p3">蓝色</p>
    <p id="p4">黑色</p>
    <p id="p5">黄色</p>
  </body>
</html>

Copy after login

Effect:

How many values does rgba in css have?

Recommended learning : css video tutorial

The above is the detailed content of How many values does rgba in css have?. For more information, please follow other related articles on the PHP Chinese website!

How many values ​​does rgba in css have?

How many values does rgba in css have?