Paaiškinta CSS nepermatomumo ypatybė ir vaizdo neskaidrumas

Į opacityturto valdymo, kaip nepermatomas elementas yra ant 0,0 iki 1,0. Kuo mažesnė vertė, tuo elementas yra skaidresnis.

Galite pasirinkti, kiek norite, kad elementas būtų skaidrus. Norėdami pasiekti skaidrumo lygį, turite pridėti šią CSS ypatybę.

Visiškai nepermatomas

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

Pusiau skaidrus

.class-name { opacity: 0.5; }

Visiškai skaidrus

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

Arba galite naudoti rgbanorėdami nustatyti elemento neskaidrumą:

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

Tai nustato background-colorelemento juodumą su 50% neskaidrumu. Paskutinė vertės rgbareikšmė yra alfa vertė . Alfa vertė 1 yra lygi 100% neskaidrumui, o 0,5 (arba .5 kaip aukščiau) lygi 50% neskaidrumui.

Vaizdo neskaidrumas ir skaidrumas

Ši opacitysavybė leidžia padaryti vaizdą skaidrų, sumažinant jo matomumą.

Opacity ima vertę nuo 0,0 iki 1,0.

1.0 yra numatytoji bet kurio vaizdo vertė. Tai visiškai nepermatoma.

Pavyzdys

img { opacity: 0.3; }

Įtraukti filter: alpha(opacity=x)į IE8 ir ankstesnes versijas. X reikšmė yra nuo 0 iki 100.

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

Štai paveikslėlio, nustatyto pagal parametrus, pavyzdys aukščiau pateiktame pavyzdyje.

vaizdas esant 30% neskaidrumui

Galite susieti opacitysu :hovernorėdami sukurti dinamišką pelės žymėjimo efektą.

Pavyzdys:

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

Kodinio pieštuko pavyzdys, rodantis skaidrų vaizdą, kuris ant pelės žymeklio tampa nepermatomas

Galite sukurti priešingą efektą su mažesniu kodu, nes pagal numatytuosius nustatymus vaizdas yra 1,0 neskaidrumas

Pavyzdys:

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

Čia yra kodavimo pavyzdys, parodantis skaidrumą, kai pelės žymeklis perkeliamas.

Daugiau apie CSS

Kaskadiniai stiliaus lakštai (CSS)

CSS yra „Cascading Style Sheets“ santrumpa. Pirmą kartą jis buvo išrastas 1996 m. Ir dabar yra standartinė visų pagrindinių interneto naršyklių funkcija.

CSS leidžia kūrėjams kontroliuoti, kaip atrodo tinklalapiai, „stilizuodami“ to puslapio HTML struktūrą.

CSS specifikacijas palaiko „World Wide Web Consortium“ (W3C).

Vien CSS galite sukurti keletą nuostabių dalykų, pavyzdžiui, šį gryno CSS minų ieškotojo žaidimą (kuriame nenaudojama „JavaScript“).