CSS-peittävyysominaisuus ja kuvan peittävyys selitetty

opacityOminaisuus määrittää, miten läpinäkymätön elementti on asteikolla 0,0-1,0. Mitä pienempi arvo, sitä läpinäkyvämpi elementti on.

Voit valita, missä määrin haluat tehdä elementistä läpinäkyvän. Sinun on lisättävä seuraava CSS-ominaisuus läpinäkyvyyden saavuttamiseksi.

Täysin läpinäkymätön

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

Osittain läpinäkyvä

.class-name { opacity: 0.5; }

Täysin läpinäkyvä

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

Vaihtoehtoisesti voit rgbaasettaa elementin peittävyyden:

.class-name{ background-color: rgba(0, 0, 0, .5); }

Tämä asettaa background-colorelementin mustaksi 50%: n opasiteetilla. Arvon viimeinen arvo rgbaon alfa-arvo . Alfa-arvo 1 on 100% opasiteetti ja 0,5 (tai .5 kuten yllä) on yhtä suuri kuin 50% opasiteetti.

Kuvan peittävyys ja läpinäkyvyys

opacityOminaisuuden avulla voit tehdä kuvan läpinäkyvä laskemalla kuinka läpinäkymätön se on.

Opacity arvo on välillä 0,0 - 1,0.

1.0 on minkä tahansa kuvan oletusarvo. Se on täysin läpinäkymätön.

Esimerkki

img { opacity: 0.3; }

Sisällytä filter: alpha(opacity=x)IE8: lle ja vanhemmille. X saa arvon 0-100.

img { opacity: 0.3; filter: alpha(opacity=30); }

Tässä on esimerkki kuvasta, joka on asetettu parametreihin yllä olevassa esimerkissä.

kuva 30%: n opasiteetilla

Voit liittää opacitykanssa :hoverluoda dynaaminen hiiri-over vaikutus.

Esimerkki:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Koodikynän esimerkki, joka näyttää läpinäkyvän kuvan, joka muuttuu läpinäkymättömäksi hiiren osoittimessa

Voit luoda päinvastaisen vaikutuksen vähemmän koodilla, koska kuvan oletusarvo on 1,0

Esimerkki:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

Tässä on koodisäiliön esimerkki osoittamaan läpinäkyvyyttä hiiren päällä.

Lisätietoja CSS: stä

CSS-tyylisivut

CSS on lyhenne sanoista Cascading Style Sheets. Se keksittiin ensimmäisen kerran vuonna 1996, ja se on nyt kaikkien tärkeimpien selainten vakio-ominaisuus.

CSS: n avulla kehittäjät voivat hallita verkkosivujen ulkoasua "muotoilemalla" kyseisen sivun HTML-rakennetta.

CSS-määrityksiä ylläpitää World Wide Web Consortium (W3C).

Voit rakentaa melko upeita asioita pelkästään CSS: ssä, kuten tämän puhtaan CSS: n Minesweeper-pelin (joka ei käytä JavaScriptiä).