Objašnjeno svojstvo CSS neprozirnosti i neprozirnost slike

The opacityproperty kontrole kako NEPROZIRNIM element je na skali od 0,0 do 1,0. Što je vrijednost niža, to je element prozirniji.

Možete odabrati do koje mjere želite element učiniti transparentnim. Morate dodati sljedeće CSS svojstvo da biste postigli razinu transparentnosti.

Potpuno neprozirno

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

Polu prozirno

.class-name { opacity: 0.5; }

Potpuno prozirno

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

Kao alternativu možete rgbapostaviti neprozirnost elementa:

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

Time background-colorse element postavlja na crno s 50% neprozirnosti. Posljednja vrijednost u rgbavrijednosti je vrijednost alfa . Alfa vrijednost 1 jednaka je 100% neprozirnosti, a 0,5 (ili .5 kao gore) jednaka je 50% neprozirnosti.

Neprozirnost i prozirnost slike

opacitySvojstvo vam omogućuje da napravite sliku transparentno spuštanjem kako Neprozirno je.

Opacity uzima vrijednost između 0,0 i 1,0.

1,0 je zadana vrijednost za bilo koju sliku. Potpuno je neproziran.

Primjer

img { opacity: 0.3; }

Uključi filter: alpha(opacity=x)za IE8 i starije verzije. X uzima vrijednost od 0-100.

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

Evo primjera slike postavljene na parametre u gornjem primjeru.

slika s 30% neprozirnosti

Možete se upariti opacitys njima :hoverkako biste stvorili dinamični efekt prelaska mišem.

Primjer:

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

Primjer kodena za prikaz prozirne slike koja postaje neprozirna pri lebdenju

Možete stvoriti suprotan efekt s manje koda, jer slika prema zadanim postavkama ima neprozirnost 1,0

Primjer:

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

Evo primjera codepen-a za prikaz transparentnosti prilikom prelaska mišem.

Više o CSS-u

Kaskadni listovi stilova (CSS)

CSS je kratica od Cascading Style Sheets. Prvi je put izumljen 1996. godine, a sada je standardna značajka svih glavnih web preglednika.

CSS omogućuje programerima da kontroliraju kako web stranice izgledaju "oblikovanjem" HTML strukture te stranice.

CSS specifikacije održava World Wide Web Consortium (W3C).

Neke prilično nevjerojatne stvari možete izgraditi samo u CSS-u, kao što je ova čista CSS igra Minesweeper (koja ne koristi JavaScript).