Opasiteetti - CSS-temppuja | CSS-almanakka 2025

opacityOmaisuus CSS määrittää kuinka läpinäkyvä elementti on.

Peruskäyttö:

div ( opacity: 0.5; )

Opasiteetin oletusarvo on oletusarvo 1 (100% läpinäkymätön). Opasiteettia ei peri, vaan koska vanhemmalla on opasiteettia, joka koskee kaikkea sen sisällä. Et voi tehdä lapsielementistä vähemmän läpinäkyvää kuin vanhempi ilman huijausta. Arvot ovat numero 0: sta 1: een, joka edustaa kanavan peittävyyttä ("alfa" -kanava). Kun elementin arvo on 0, elementti on täysin näkymätön; arvo 1 on täysin läpinäkymätön (kiinteä).

Katso tämä kynä!

IE-yhteensopivuus

Jos haluat läpinäkyvyyden toimivan kaikissa IE-versioissa, järjestyksen tulisi olla seuraava:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Jos et käytä tätä tilausta, IE8-as-IE7 ei käytä peittävyyttä, vaikka IE8 ja puhdas IE7.

Huomautus pinoamisyhteyksistä

Jos elementti, opacityjonka arvo on alle 1, sijoitetaan, z-indexominaisuus toimii CSS2.1: ssä kuvatulla tavalla, paitsi että autoarvoa käsitellään 0: na, koska aina luodaan uusi pinontakonteksti.

Opasiteettia voidaan käyttää vaihtoehtona visibilitykiinteistölle: visibility: hidden;on kuin opacity: 0;.