RGBA – kako določimo transparenco našim WEB barvam

RGBa je CSS 3 značka. Poleg nastavitve RGB barve nam omogoča tudi nastavitev transparence – “a”(alpha).

Transparenco določamo s pomočjo dodatnega parametra. Njegova vrednost se giblje med 0.0 do 1.0, pri čemer je 1.0 viden 0.0 pa neviden. Vrednosti vmes pa določajo transparenco.

Primer kode

div {
background: rgba(255, 126, 0, 0.5);
}

Zaradi različne podpore brskalnikov vedno uporabite tudi rezervno barvo – RGB. Tako se uporabi polna barva pri brskalnikih, ki te značke ne podpirajo.

Primer kode

div {
background: rgb(255, 126, 0); /* Rezerva */
background: rgba(255, 126, 0, 0.5);
}

Primer uporabe RGBA


div.P1 { background:rgba(255, 126, 0, 0.2); height:20px; }
div.P2 { background:rgba(255, 126, 0, 0.4); height:20px; }
div.P3 { background:rgba(255, 126, 0, 0.6); height:20px; }
div.P4 { background:rgba(255, 126, 0, 0.8); height:20px; }
div.P5 { background:rgba(255, 126, 0, 1.0); height:20px; }

Primer uporabe RGB barve


div.P11 { background:rgb(255, 229, 204); height:20px; }
div.P21 { background:rgb(255, 203, 153); height:20px; }
div.P31 { background:rgb(255, 178, 102); height:20px; }
div.P41 { background:rgb(255, 152, 51); height:20px; }
div.P51 { background:rgb(255, 126, 0); height:20px; }

Slabost te metode je, da jo ne podpirajo vsi brskalniki. Podrobno lestvico si lahko ogledate spodaj.

Brskalnik Rezultat
Firefox 3.0.5 Deluje
Firefox 2.0.0.18 Ne deluje
Safari 4 Deluje
Safari 3.2.1 Deluje
Mobile Safari (iPhone) Deluje
Opera 9.6.1 Ne deluje
IE 6 Ne deluje
IE 7 Ne deluje
IE 8 Ne deluje
Google Chrome 1.0.154.43 Deluje
Google Chrome 1.0.154.46 Deluje
  • Ja, sej ravno zaradi tega, ker na IE ne deluje je bolj ali manj neuporabna. Ne vem, meni gre vedno bolj na živce pisanje kode za vsak iskalnik posebej, zato se trudim uporabljat tisto, kar znajo vsi prebrat…
    Ampak izgleda pa odlično

    Odgovori

Komentiraj


*