Home >Web Front-end >Front-end Q&A >How many values does rgba in css have?
How many values does rgba in css have?
- 醉折花枝作酒筹Original
- 2021-05-24 17:57:453965browse
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.
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.
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)
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>Effect:
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!