Home >Web Front-end >Front-end Q&A >Does css3 support rgba?

Does css3 support rgba?

WBOY
WBOYOriginal
2022-03-29 17:51:211916browse

css3 supports rgba; the rgba() function is a function in css3 that uses the superposition of red, green, blue, and transparency to generate a variety of colors. The value range of red, green, and blue is "0 to 255" or "0% to 100%", and the value range of transparency is 0 to 1, and the syntax is "rgba (red, green, blue, transparency)".

Does css3 support rgba?

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

Does css3 support rgba

The rgba() function uses the superposition of red (R), green (G), blue (B), and transparency (A) to generate a variety of colors . Supported version: CSS3

RGBA means red, green, blue, transparency (English: Red, Green, Blue, Alpha).

Colors in CSS are defined in three ways: using color methods (RGB, RGBA, HSL, HSLA), hexadecimal color values ​​and predefined color names.

CSS Syntax

rgba(red, green, blue, alpha)
  • red defines the red value, the value range is 0 ~ 255, you can also use the percentage 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%.

  • alpha - Transparency Define transparency 0 (completely transparent) ~ 1 (completely opaque)

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(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(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>

Output result:

Does css3 support rgba?

(Learning video sharing: css video tutorial)

The above is the detailed content of Does css3 support rgba?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn