CSS neprozirnost svojstvo: kontrola transparentnosti

Da biste upravljali transparentnošću elemenata stranice, koristite CSS neprozirnost. Prema specifikaciji, primjenjivo je za čvorove bilo koje vrste i podržava se u svim modernim preglednicima. Pomoću nje možete stvoriti zanimljiv dizajn ili implementirati praktičnu interaktivnu interakciju s korisnikom.

Moguće vrijednosti

Sintaksa neprozirnosti u css izgleda ovako:

selektor {opacity: 1} selektor {opacity: 0-} selektor {opacity: 0.4-}

Unos prihvaća numeričke vrijednosti u rasponu od 0 do 1. Parametar može biti djelić jedinice, a točka se koristi kao separator cjelobrojnog i djelomičnog dijela u CSS.

Element s nultom transparentnošću postaje nevidljiv, ali i dalje zauzima svoje mjesto na stranici i zadržava mogućnost interakcije s korisnikom.

Ako se vrijednost imovine razlikuje od nule, tada će stvarna transparentnost biti izračunata kao postotak neke gornje granice. U uobičajenoj situaciji, neprozirnost: 1 određuje punu neprozirnost elementa.

Transparentnost dječjih čvorova

Međutim, ako element ima roditelja čija se transparentnost razlikuje od jedinstva, izračun se mijenja. Potomak ne može biti "manje transparentan" od bilo kojeg od njegovih predaka. CSS svojstvo neprozirnosti roditeljskog bloka postaje gornja granica transparentnosti dječjeg čvora.

roditelj {neprozirnost: 0.7-} dijete {neprozirnost: 1-}

U takvoj situaciji, dijete će biti 30% transparentno, iako je vrijednost neprozirnosti jedna.

Primjeri upotrebe

Primjer 1. Translucencija. Potrebno je da se ispod ciljnog elementa vidi glavna pozadina bloka.

.target {background: black-opacity: 0.5-}

Prozirno nije samo pozadina ciljnog bloka, već i tekst.

Primjer 2. Dinamičko upravljanje transparentnošću. Vrijednost CSS svojstva ciljnog bloka promijenjena je pokazivanjem pokazivača na nju.

.target {opacity: 0.2 -}. cilj: zadržite {opacity: 1-}

Dinamička transparentnost

Zadnji primjer pokazuje da transparentni elementi i dalje reagiraju na događaje na stranici, kao što je pokazivač miša. To vam omogućuje da koristite jаvascript da biste upravljali CSS neprozirnim svojstvom, a također primijenite mehanizme prijelaza i animacije kako biste glatko promijenili način prikaza.

Da biste pristupili transparentnosti iz skripte, morate se uputiti na stilski objekt određenog elementa.

/ / dobiti trenutnu vrijednost transparentnosti var opacity = element.style.opacity - // postavite novu valueelement.style.opacity = 0.4-

Glatki nestanak bloka može se provesti upotrebom prijelaza CSS-entiteta:

element {opacity: 0.1-transition: opacity 1000ms-} element: lebdjeti {neprozirnost: 0.8-prijelaz: opacity 2000ms-}

Sada čvor elementa promijenit će prozirnost od 10 do 80% za jednu sekundu dok lebdi mišem, a kada pokazivač nestaje, on će se izblijediti na izvornu vrijednost u roku od dvije sekunde.

CSS neprozirnost u kombinaciji s mehanizmom prijelaza omogućuje stvaranje lijepih efekata.

Alfa kanal umjesto neprozirnosti

Glavne suptilnosti neprozirnog mehanizma u CSS:

• njezino se djelovanje proteže ne samo na pozadinu bloka, već i na tekstualni sadržaj koji je poželjno ostaviti jasnim;
• dječji elementi ne mogu biti manje transparentni od onih roditelja.

Ako ovi učinci otežavaju život izgleda, umjesto neprozirnosti, trebali biste koristiti samo prozirnu pozadinu, koja će odrediti njegovu vrijednost u RGBA ili HSLA formatu.