CSS3 Opacity

En kort introduktion til Opacity og RGBA

Opacitet erklæring angiver hvor uigennemsigtig et element er. En opacitet værdi på 1 betyder, at elementet er helt uigennemsigtig; en opacitet værdi på 0 betyder et element er slet ikke uigennemsigtig, dvs helt gennemsigtig.

div { background-color: rgb(255,0,0); opacity: 1; }

WebKit, Firefox og Chrome browsere understøtter alle Opacity.

RGBA erklæringen giver dig mulighed for at indstille opaciteten (via Alpha kanalen) som en del af farveværdien.

div { background-color: rgba(255,0,0,1); }

Dette understøttet Webkit, og den første alpha af Firefox 3.

Den vigtigste forskel mellem de to erklæringer er denne:

Opacitet sætter opacitetens værdi for et element og alle sine børn;
RGBA sætter opacitetsværdien for en enkelt erklæring.

Her er en kode eksempel fra denne sides CSS:

#center-box {
    background-color:rgba(240,240,240,0.6) !important;
/*--For Internet Explorer 6, 7, 8 and older--*/ background-color:#F8F8F8; }

browser window corner

Den hvide center-box på dette websted, der indeholder menuen, og teksten er uigennemsigtig. Hvis du ikke kan se det så prøv at flytte browservinduets hjørne.


Denne side er optimeret til Firefox og Google Chrome.
Den vil ikke kunne virke med gamle versioner af Internet Explorer.
Internet Explorer 6, 7 og 8 understøtter ikke Processing.js,
border-radius og mange andre
ting, der burde være synlige på internettet.
Internet Explorer 9 findes kun til Vista og Windows 7.