I det som kanskje etterhvert er CSS3 sin fargedel (eller hva en skal kalle det) så har de definert at en kan bruke opacity (opasitet eller opak på norsk dvs. ugjennomsiktighet). Jeg er litt uenig i syntaks for RBGA og HSLA.
Slik det er nå kan en i CSS skrive RGB-verdiene på følgende vis:
#f00
#ff0000
rgb(255,0,0)
rgb(100%, 0%, 0%)
Dvs. heksdesimalt, desimalt og prosent.
For CSS3 er opacity definert som:
<alphavalue>Syntactically a
<number>. The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is<alphavalue>.
Jeg synes ikke det er pent. Greit nok en kan ha 0.0 til 1.0, men en burde i tillatt 0%-100%, #0-#f, #00-#ff og kanskje 0-255. Det er litt underspefisiert hvor stor nøyaktighet/desimaler en kan oppgi <number> for <alphavalue>.
En «farge» a() som arver farger med legger til en alfakanal ville ha vært en bedre løsning. Dvs. noe slikt:
color: a(80%) ;
background-color: a(266) ;
og kanskje:
color: #8 ;
border-color: #88 ;
selv om det nok kanskje nok kan tolkes som #888 = #888888, men siden #n og #nn ikke har vært definert før for CSS (såvidt jeg vet) så kan de kanskje like greit forbeholdes en alfakanal.
Når en ser på hva som er foreslått for RGBA og HSLA (A for alfakanal) så synes jeg det kommer fram mer tydelig hvorfor 0.0 til 1.0 ikke er helt bra. For det første så kan en ikke oppgi opasitet som heksdesimale verdier, dvs følgende er ikke tilatt:
#f009
#ff000099
Dette er litt irriterende siden alfakanal i PNG er definert som:
An alpha value of zero represents full transparency, and a value of 2bitdepth-1 represents a fully opaque pixel. Intermediate values indicate partially transparent pixels that can be combined with a background image to yield a composite image. (Thus, alpha is really the degree of opacity of the pixel. But most people refer to alpha as providing transparency information, not opacity information, and we continue that custom here.)
En kan altså ikke direkte ta alfakanalverdier fra PNG til CSS3. For det andre synes jeg det virker litt stygg syntaks for RGBA og HSLA. Slik er det foreslått i eksemplene:
rgba(255,0,0,1)
rgba(100%,0%,0%,1)
hsla(120, 100%, 50%, 1)
Det første eksemplet er ikke intuitivt, dvs. det som slår meg er at det fort blir oppfattet som rød=255 grønn=0, blå=0 og alfakanal=1 (av 255). Jeg synes det er mer naturlig med:
rgba(255,0,0,255)
rgba(100%,0%,0%,100%)
hsla(120, 100%, 50%, 100%)
opacity er sikkert greit som en kortform for å gjøre noe halvgjennomsiktig slik som css3.info viser i «On opacity and complexity»
img { opacity: 0.6; }
img:hover { opacity: 1; }
Eller er det det? Hva om jeg nå skriver:
p { opacity: 0.4 ;}
img { opacity: 0.6; }
img:hover { opacity: 1; }
og
<p><img src="eks.png"></p>
Jeg ville ha tippe at img dette tilfeller ikke skal blandes med bakgrunnen når muspekeren er over bildet. Det ser ikke ut til å være tilfellet i Opera, Firefox, nightly webkit og OmniWeb. Hm.