Maison  >  Article  >  interface Web  >  Est-ce que rgba est un nouvel attribut en CSS3 ?

Est-ce que rgba est un nouvel attribut en CSS3 ?

WBOY
WBOYoriginal
2022-01-24 14:35:062769parcourir

En CSS3, rgba() est un nouvel attribut de CSS3. Cette fonction est utilisée pour générer différentes couleurs en utilisant la superposition du rouge, du vert, du bleu et de la transparence. La syntaxe est "rgba(red, green, blue, alpha)". .

Est-ce que rgba est un nouvel attribut en CSS3 ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Est-ce que rgba est un nouvel attribut en CSS3 ?

rgba est un nouvel attribut en CSS3 ? La fonction

rgba() utilise la superposition du rouge (R), du vert (G), du bleu (B) et de la transparence (A) pour générer différentes couleurs.

RGBA signifie rouge, vert, bleu et transparence (anglais : Red, Green, Blue, Alpha).

  • Rouge (R) Un entier compris entre 0 et 255, représentant la composante rouge de la couleur. .

  • Vert (G) Un nombre entier compris entre 0 et 255, représentant la composante verte de la couleur.

  • Bleu (B) Un entier compris entre 0 et 255, représentant la composante bleue de la couleur.

  • La transparence (A) prend une valeur comprise entre 0 et 1, représentant la transparence.

Version prise en charge : CSS3

La syntaxe est :

rgba(red, green, blue, alpha)

L'exemple est le suivant :

<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>

Résultat de sortie :

Est-ce que rgba est un nouvel attribut en CSS3 ?

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Que signifie CSS3 ?Article suivant:Que signifie CSS3 ?