English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The CSS rgba() function can be used to provide a color value with alpha transparency in CSS. It allows you to specify an RGB color value and an alpha value to determine the transparency of the color.
Use RGBA color and opacity:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
#p1 {background-color:rgb(255,0,0,0.3);}
#p2 {background-color:rgb(0,255,0,0.3);}
#p3 {background-color:rgb(0,0,255,0.3);}
#p4 {background-color:rgb(192,192,192,0.3);}
#p5 {background-color:rgb(255,255,0,0.3);}
#p6 {background-color:rgb(255,0,255,0.3);}
</style>
</head>
<body>
<p>RGB color, and use opacity:</p>/p>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Gray</p>
<p id="p5">Yellow</p>
<p id="p6">Cherry red</p>
</body>
</html>Test to see ‹/›The rgba() function uses the superposition of Red (R), Green (G), Blue (B), and Alpha (A) to generate various colors.
RGBA stands for Red, Green, Blue, and Alpha.
Red (R)0 to 255 integer between
Green (G)0 to 255 integer between
Blue (B)0 to 255 integer between
Opacity (A)Value 0~1 representing opacity.
Supported Versions: CSS3
The numbers in the table indicate the first browser version that supports this function.
| Function | |||||
|---|---|---|---|---|---|
| rgba() | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
rgba(red, green, blue, alpha)
| Value | Description |
|---|---|
| red | Define the red value, ranging from 0 ~ 255, which can also be expressed as a percentage 0% ~ 100%. |
| green | Define the green value, ranging from 0 ~ 255, which can also be expressed as a percentage 0% ~ 100%. |
| blue | Define the blue value, ranging from 0 ~ 255, which can also be expressed as a percentage 0% ~ 100%. |
| alpha - Opacity | Define opacity 0 (fully transparent) ~ 1(Completely Transparent) |