Nepremična lastnost CSS: nadzor preglednosti

Za nadzor preglednosti elementov strani uporabite CSS lastnost motnosti. V skladu s specifikacijo se uporablja za vozlišča katere koli vrste in je podprt v vseh sodobnih brskalnikih. Z njeno pomočjo lahko ustvarite zanimivo obliko ali izvedete prikladno interaktivno interakcijo z uporabnikom.

Možne vrednosti

Sintaksa lastnosti opacity v css izgleda takole:

izbirnik {opacity: 1-} izbirnik {opacity: 0-} selektor {neprepustnost: 0,4-}

Vhod sprejema številske vrednosti v razponu od 0 do 1. Parameter je lahko del enote, pika pa se uporablja kot separator celega in delnega dela v CSS.

Element z ničelno prosojnostjo postane neviden, vendar še vedno zaseda svoje mesto na strani in ohranja sposobnost za interakcijo z uporabnikom.

Če se vrednost lastnosti razlikuje od nič, se dejanska preglednost izračuna kot odstotek zgornje meje. V običajni situaciji opcija: 1 določa polno motnost elementa.

Preglednost otroških vozlišč

Če pa ima element staršev, katerega preglednost se razlikuje od enotnosti, se izračun spremeni. Potomec ne more biti "manj pregleden" od katerega koli njegovega prednika. Lastnost CSS nepreglednosti nadrejenega bloka postane zgornja meja prosojnosti otroškega vozlišča.

staršev {opacity: 0.7-} otrok {opacity: 1-}

V takem položaju bo otroški element transparenten, čeprav je vrednost motnosti ena.

Primeri uporabe

Primer 1. Translucency. Potrebno je, da se pod ciljnim elementom vidi glavno ozadje bloke.

.cilj {ozadje: črna-nepreglednost: 0,5-}

Transparentna ni le ozadje ciljnega bloka, ampak tudi besedilo.

Primer 2. Dinamično upravljanje preglednosti. Vrednost lastnosti CSS tarčnega bloka se spremeni tako, da se kazalec na njem premakne.

.cilj: {opacity: 0.2 -}. cilj: lebdenje {opacity: 1-}

Dinamična prosojnost

Zadnji primer kaže, da se pregledni elementi še naprej odzivajo na dogodke strani, na primer na lebdi kurzorja. To vam omogoča, da uporabite jаvascript za nadzor lastnosti motnosti CSS, uporabite pa tudi mehanizme za prehod in animacijo, ki gladko spreminjajo način prikaza.

Za dostop do preglednosti iz skripte se morate sklicevati na slog predmeta določenega elementa.

// dobite trenutno vrednost preglednosti var opacity = element.style.opacity - // nastavite novo valueelement.style.opacity = 0.4-

Smotrno izginotje bloka se lahko izvede s prehodom na lastnost CSS:

element {opacity: 0.1-prehod: motnost 1000ms-} element: hover {opacity: 0.8-prehod: motnost 2000ms-}

Zdaj bo vozlišče elementa spremenilo prosojnost z 10 na 80% za eno sekundo, medtem ko se bo pomaknilo na miško, in ko bo kazalec izginil, bo v dveh sekundah izginilo na prvotno vrednost.

Lastnost motnosti CSS v kombinaciji s prehodnim mehanizmom omogoča ustvarjanje čudovitih učinkov.

Alfa kanal namesto motnosti

Glavne lastnosti mehanizma motnosti v CSS:

• njeno delovanje se razteza ne samo na ozadje bloka, temveč tudi na njegovo vsebino besedila, ki jo je bolje pustiti jasno;
• otroški elementi ne morejo biti manj pregledni od staršev.

Če ti učinki zapletajo življenje postavitve, namesto motnosti, uporabite le prosojno ozadje in določite njegovo vrednost v obliki RGBA ali HSLA.