English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manuale di riferimento CSS

Regole @ di CSS

Completo di proprietà CSS

Funzione rgba() di CSS

La funzione rgba() di CSS può essere utilizzata per fornire un valore di colore con trasparenza alpha utilizzando CSS. Permette di specificare un valore di colore RGB e un valore alpha per determinare l'opacità del colore.

Funzione CSS

Esempio online

Utilizza i colori RGBA e l'opacità:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base 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>
Colore RGB, e utilizza la trasparenza:</p>
<p id="p1">Rosso</p>
<p id="p2">Verde</p>
<p id="p3">Blu</p>
<p id="p4">Grigio</p>
<p id="p5">Giallo</p>
<p id="p6">Rosso scuro</p>
</body>
</html>
Testa per vedere ‹/›

Definizione e utilizzo

La funzione rgba() utilizza la sovrapposizione di Rosso (R), Verde (G), Blu (B) e Trasparenza (A) per generare vari colori.

RGBA sta per Rosso, Verde, Blu, Trasparenza (in inglese: Red, Green, Blue, Alpha).

  • Rosso (R)Intero tra 0 e 255, rappresenta la componente rossa del colore.

  • Verde (G)Intero tra 0 e 255, rappresenta la componente verde del colore.

  • Blu (B)Intero tra 0 e 255, rappresenta la componente blu del colore.

  • Trasparenza (A)Valore da 0 a 1, rappresenta la trasparenza.

Versione supportata: CSS3

Compatibilità del browser

I numeri nella tabella rappresentano la versione del primo browser che supporta la funzione.

Funzione




rgba()1.04.01.01.03.5

Sintassi CSS

rgba(rosso, verde, blu, alpha)
ValoreDescrizione
redDefinire il valore rosso, il cui intervallo di valori è 0 ~ 255, può anche essere utilizzato come percentuale 0% ~ 100%.
greenDefinire il valore verde, il cui intervallo di valori è 0 ~ 255, può anche essere utilizzato come percentuale 0% ~ 100%.
blueDefinire il valore blu, il cui intervallo di valori è 0 ~ 255, può anche essere utilizzato come percentuale 0% ~ 100%.
alpha - trasparenzaDefinire la trasparenza 0 (completamente trasparente) ~ 1 (completamente opaca)

Funzione CSS