Hvordan bruke RGBa-fargemodellen

RGBa er en måte som farger blir erklært i CSS3, og den inkluderer de røde, grønne og blå kanalene i fargemodellen, sammen med alfakanalen for innstillinger for gjennomsiktighet som muliggjør alfa-blanding og komposisjon. Alfakanalen angir opacitet eller gjennomsiktighetsverdi for pikselverdien. En alfaverdi på 1 setter kanalen til fullstendig ugjennomsiktig, mens en verdi på 0 setter kanalen til fullstendig gjennomskinnelig eller helt gjennomsiktig. I henhold til W3C-spesifikasjonen for PNG Data Representation, er alfakanalen virkelig graden av opacitet til pikselen, men de fleste refererer til alfa som å gi åpenhetsinformasjon, ikke informasjon om opacitet.

Enkelt RGBa-eksempel

Et eksempel på en eiendom i RGBa-stil vil se slik ut:

 . bg_sample3 { 
 bakgrunn: rgba (121, 7, 242, 0, 25); 
 } 
Og dette kodestykket ovenfor i CSS viser en nyanse av lilla som vist i figur A (Chrome 20.0 er nettleseren som brukes til disse figurene):

Figur A

Følgende skjerm i figur B viser fem hurtigprøver i samme farge med forskjellige alfa-nivåer:

Figur B

Moro med RGBa

Skikkelig moro med manipulering av RGBa-fargemodellen starter når du legger flere definerte egenskaper, og skaper noen interessante effekter på websidene dine. Eksemplet nedenfor demonstrerer tre bokser med individuelt definerte RGBa-egenskaper, og deres overlappende transparenter kombineres for å skape en interessant fargekombinasjon.

Følgende egenskaper er definert i stilene for de tre boksene:

 .box_1 { 
 bakgrunn: rgba (9, 53, 135, .5); 
 bredde: 250px; 
 høyde: 250 px; 
 margin-top: 50 piksler; 
 padding: 2 piksler; 
 } 
 .box_2 { 
 bakgrunn: rgba (17, 191, 083, .25); 
 bredde: 250px; 
 høyde: 250 px; 
 margin-top: -200px; 
 margin-venstre: 50 piksler; 
 padding: 2 piksler; 
 } 
 .box_3 { 
 bakgrunn: rgba (227, 188, 32, .15); 
 bredde: 250px; 
 høyde: 250 px; 
 margin-top: -200px; 
 margin-venstre: 100 piksler; 
 padding: 2 piksler; 
 } 
Eksempelet på tre bokser som overlapper hverandre med henholdsvis en annen RGBa-egenskap, vises i figur C :

Innstiller en svevet RGBa-fargeendring

Hvis du tar det et skritt videre, hva med å sette et bestemt element for å endre bakgrunnsfargen når du holder musen? I dette eksemplet vil vi sette et hvilket som helst listeelement med en definert stilegenskap som vist i CSS-utdraget nedenfor:

 li { 
 bakgrunn: rgba (227, 188, 32, .15); 
 bredde: 155px; 
 padding: 2 piksler; 
 } 
 li: hover { 
 bakgrunn: rgba (171, 83, 10, 0, 75); 
 } 
Det første listeelementet vises med den opprinnelige definerte bakgrunnsfargen, deretter viser det andre listeposten på svevet den resulterende RGBa-bakgrunnsfargen som vist i figur D :

Du kan også tilordne RGBa-styling som inline-stiler, som i eksemplet HTML-kode som vises nedenfor:

 RGBA (11, 156, 49, 0.2) 
 RGBA (11, 156, 49, 0.4) 
 RGBA (11, 156, 49, 0.6) 
 RGBA (11, 156, 49, 0.8) 
 RGBA (11, 156, 49, 1) 
Koden over viser spekteret av RGBa-farger i figur E :

Fallback for IE

For IE gjenkjennes ikke alfakanalen, så en tilbakefall betyr at du må normalisere alfakanalen til den innstillingen du ønsker for hver av fargekanalene. Det er flere måter å konvertere RGBa-fargekanaler til RGB-fargekanaler ved å bruke algoritmer og fancy beregninger; Imidlertid er min raske juks å bare bruke fargevelgeren i PhotoShop for å finne RGB-fargekanalegenskapene til det resulterende displayet, som vist i figur F.

Følgende er de konverterte verdiene for hver forekomst av det delvis grønne spekteret listet nedenfor:

rgba (11 156, 49, 0, 2) konverteres til rgb (205, 234, 212)

rgba (11 156, 49, 0, 4) konverteres til rgb (156 214 171)

rgba (11 156, 49, 0, 6) konverteres til rgb (107, 194, 130)

rgba (11 156, 49, 0, 8) konverteres til rgb (58, 174, 89)

Og selvfølgelig er den siste rgba (11, 156, 49, 1) satt til full opacitet, derfor er den eneste endringen for tilbakegangen å fjerne alfakanalen og er representert som rgb (11, 156, 49). Og tilbakefallet som vist i IE 8 er vist i figur G :

Eksempelet index.html og styles.css filer er inkludert i nedlastingen.

© Copyright 2021 | pepebotifarra.com