Home > Article > Web Front-end > How to write css3 color transparency
How to write css3 color transparency
- WBOYOriginal
- 2021-12-08 18:46:492731browse
Writing: 1. "rgba (red, green, blue, transparency)"; the rgba() function generates various colors and controls the transparency of the colors through the superposition of red, green, and blue colors; 2. "hsla (Hue, Saturation, Lightness, Transparency)"; the hsla() function defines a color through hue, saturation, and brightness and controls the transparency of the color.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to write css3 color transparency
1. In css, you can use the rgba() function, using red (R), green ( G), blue (B), and transparency (A) are superimposed to generate various colors.
The syntax is as follows:
rgba(red, green, blue, alpha)
Among them:
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(255,0,0,1);}
</style>
</head>
<body>
<p>RGB 颜色，并使用透明度:</p>
<p id="p1">红色</p>
<p id="p2">红色</p>
</body>
</html>Output result:
2. The hsla() function uses hue, saturation, brightness, and transparency to define colors.
HSLA stands for hue, saturation, brightness, and transparency (English: Hue, Saturation, Lightness, Alpha).
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,50%,1);}
</style>
</head>
<body>
<p>HSL 颜色，并使用透明度:</p>
<p id="p1">绿色</p>
<p id="p2">绿色</p>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to write css3 color transparency. For more information, please follow other related articles on the PHP Chinese website!