59 besökare, 1 medlem och 1 Student är online nu
Loopia

CSS (Cascading Style Sheets)

RGBa färgvärden med opacitet

 

CSS3 ger möjlighet att använda färgvärden i RGBa som är ett tillägg till RGB-färger och ger en alfa-kanal för att ange opacitet.

Ett RGBa-värde anges så här: rgba(red, green, blue, alpha)

Parametern Alpha anges som ett värde mellan 0 och 1 där 0.5 är 50% opacitet. Du kan tex ange värdet 0.45 om 0.5 är för hög opacitet.

I exemplen nedan används Svart färg för att skapa olika gråskalor med Alfa-värdet:

rgba(0, 0, 0, 0.15);

rgba(0, 0, 0, 0.3);

rgba(0, 0, 0, 0.45);

rgba(0, 0, 0, 0.75);

I exemplen nedan används Röd färg för att skapa olika nyanser med Alfa-värdet:

rgba(255, 0, 0, 0.15);

rgba(255, 0, 0, 0.3);

rgba(255, 0, 0, 0.45);

rgba(255, 0, 0, 0.75);

I exemplen nedan används Gråskalor för att skapa olika nyanser med Alfa-värdet. Observera att ingen transparens används då Alpha-värdet är "1":

rgba(204,204,204, 1);
motsvarar Hex-värde:
#CCC
rgba(253,253,253, 1);
motsvarar Hex-värde:
#999
rgba(102,102,102, 1);
motsvarar Hex-värde:
#666
rgba(51, 51, 51, 1);
motsvarar Hex-värde:
#333

I exemplen nedan används Grundfärger för att skapa olika nyanser med Alfa-värdet. Observera att ingen transparens används då Alpha-värdet är "1":

rgba(255,0,0, 1);
motsvarar Hex-värde:
#FF0000
rgba(255,255,0, 1);
motsvarar Hex-värde:
#FFFF00
rgba(0,255,0, 1);
motsvarar Hex-värde:
#00FF00
rgba(0,0,255, 1);
motsvarar Hex-värde:
#0000FF