Keskustelu: Nettisivujen teko: CSS: Opacity-pulma

Ongelma on seuraava: div on läpinäkyvä, divissä on kuva, kuva ottaa divin läpinäkyvyyden, saanko kuvan läpinäkyvyyden pois? Havainnollistava pätkä:

div.esim {
  opacity: 0.7;
  background: #123456;
}

div.esim img {
  /* saisko tämän jotenkin ei-läpinäkyväksi???
  opacity: 1.0  ei auta */
}

Käytä osittain läpinäkyvää PNG-kuvaa taustakuvana, 1 x 1 pikseliä riittää jos tasavärisyys käy päinsä. opacity vaikuttaa aina kaikkiin elementteihin sen elementin sisällä, johon sitä käyttää.

Pistetään nyt tähän threadiin että toimiiko tuo opacity vanhemmillakin selaimilla?

Se on ollut kaikissa valtaselaimissa IE:tä lukuunottamatta epämääräisesti arvioiden nyt jonkun pari vuotta tuettuna. Kohtalaisen tuore lisäys, muistaakseni ilmestyi ensimmäisenä Firefoxiin ja levisi sitten Operaan ja Safariin. Käytännön tasolla siis käytettävissä oleva ominaisuus. IE:ssä voi koettaa tyytyä filter: alpha(opacity=50); - tosin se vaatii hasLayoutin kytkemisen päälle samassa elementissä, sen saa asettamalla esim. leveyden tai korkeuden tai käyttämällä zoom: 1;

PNG:n läpinäkyvyys pitää laittaa erikseen päälle IE6-selaimissa CSS:llä tai JavaScriptillä..