How to set transparency color in css
Method: 1. Use the RGBA() function to generate various colors using the superposition of red, green, blue and transparency. The syntax is "rgba(red, green, blue, transparency)"; 2 , use the HSLA() function to define colors using hue, saturation, brightness, and transparency, with the syntax "hsla (hue, saturation, brightness, transparency)".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Method 1: Use the RGBA() function
rgba() function uses red (R), green (G), blue (B), and transparency (A) overlay to generate a variety of colors.
Syntax:
rgba(red, green, blue, alpha)
Attribute value:
| Description | |
|---|---|
| #red | Define the red value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.|
| green | Define the green value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.|
| blue | Define the blue value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.|
| alpha - Transparency | Define transparency 0 (fully transparent) ~ 1 (fully opaque)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 颜色，并使用透明度:</p>
<p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">灰色</p>
<p id="p5">黄色</p>
<p id="p6">樱桃色</p>
</body>
</html>
hsla() function uses hue, saturation, brightness, and transparency to define colors.
HSLA stands for Hue, Saturation, Lightness, and Transparency (English: Hue, Saturation, Lightness, Alpha).
- Hue (H) is the basic attribute of color, which is what is commonly called color name, such as red, yellow, etc.
- Saturation (S) refers to the purity of the color. The higher it is, the purer the color is, and the lower it is, the color will gradually turn gray. It takes a value of 0-100%.
- Brightness (L) takes 0-100%. Increase the brightness and the color will change to white; decrease the brightness, the color will change to black.
- Transparency (A) takes a value between 0 and 1, representing transparency.
- Syntax:
hsla(hue, saturation, lightness, alpha)
Attribute value:
| Description | |
|---|---|
| Define hue (0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue | |
| Define saturation; 0% is gray, 100% full color | |
| Define brightness 0% is dark, 50% is normal, 100% is white | |
| Define transparency 0 (fully transparent) ~ 1 (fully opaque) |
css video tutorial
