Ta članek vam bo predstavil koncept, ki vam bo pomagal razumeti motnost v in vam povem, kako upravljati ta parameter. V tem članku bodo zajeti naslednji napotki:
- Neprosojnost v CSS
- Motnost, podedovana s kaskadnimi elementi
- Nastavitev atributa RGBA za kaskadne elemente
- Spreminjanje motnosti pri učinku lebdenja
Neprosojnost ozadja elementa je uporabna nastavitev funkcije pri oblikovanju HTML. Z nastavitvijo ravni neprosojnosti (obratno od prosojnosti) lahko oblikovalec nadzoruje vidnost elementa prek lastnosti neprosojnosti CSS. To se običajno uporablja kot nastavitev ozadja, kadar obstajajo kaskadni elementi, nameščeni eden nad drugim.
Najpogostejši scenarij, v katerem se uporablja ta funkcija, je naslednji:
- Delno prozorna slika ozadja je postavljena za element besedila.
- Slika ozadja je motno vidna, zato ne prevladuje nad besedilom spredaj.
- Slika se lahko popolnoma osredotoči, ko se uporabnik izrecno odloči, da jo bo videl.
Morda boste želeli prebrati na preden se naučite o neprosojnosti CSS.
Za izčrpno vadnico CSS obiščite Edureka CSS Vadnica za začetnike . Dobili boste odlične informacije o tem, kako naj se CSS uporablja za povečanje spletnega oblikovanja HTML.
družina stolpcev kasandra vs tabela
Nadaljujemo s tem člankom o motnosti v CSS
Neprosojnost v CSS
V CSS je neprosojnost nastavljena kot številčna vrednost med 0,0 - 1,0. Vrednosti, ki so bližje ničli, predstavljajo večjo preglednost, slika bo zelo vidna. Začnimo s primerom slike, ki je prikazana s 50-odstotno prosojnostjo. Glej primer 1 spodaj.
Primer 1: Slika za ozadje je nastavljena na pol- preglednost
img {motnost: 0,5 filter: alfa (motnost = 50) / * Za IE8 in starejše * /} 
Primer 1: Izhod
Izvirna slika (100% motnost)
Slika z nastavitvijo 50% motnosti
V zgornjem primeru je bil samo en element - slika. Tudi druge elemente lahko nastavite s parametrom motnosti, kot so besedilo, elementi div in tako naprej.
Nadaljujemo s tem člankom o motnosti v CSS
Motnost, podedovana s kaskadnimi elementi
Če so elementi zloženi drug čez drugega, če ima element ozadja nastavitev motnosti, ga podedujejo vsi podrejeni elementi. To je privzeta nastavitev . To pomeni, da če je besedilno polje postavljeno nad sliko in ima slika nastavitev nepreglednosti 0,5, bosta tako slika kot element besedila vidni le delno.
V naslednjem primeru si oglejmo primer otroškega besedilnega elementa, nameščenega nad sliko TOM & JERRY. Privzeti učinek motnosti lahko vidimo v primeru 2.
.container {položaj: relativna poravnava besedila: srednja motnost: 0,5} .centered {položaj: absolutno zgoraj: 50% levo: 50% preoblikovanje: prevajanje (-50%, -50%) barva: modra velikost pisave: 40px} } TOM & JERRY2. primer: Besedilo podeduje motnost od nadrejene slike
Nadaljujemo s tem člankom o motnosti v CSS
Nastavitev atributa RGBA za kaskadne elemente
Obstaja še en način, na katerega lahko motnost nadziramo s kaskadnimi elementi. Če želite, da nepreglednost elementa ozadja na podrejeni element ne vpliva, potem lahko uporabite Nastavitev atributa RGBA .
lutka vs kuhar vs docker
Primer 3: Uporaba nastavitve RGBA
ozadje: rgba (76, 175, 80, 1.0) / * Slika nima nastavitve motnosti * / / * Zeleno ozadje za besedilo s 100-odstotno motnostjo * / / * Besedilo modre barve ima 100-odstotno motnost * /
ozadje: rgba (76, 175, 80, 0,4) / * Slika nima nastavitve motnosti * / / * Zeleno ozadje za besedilo s 40-odstotno motnostjo * / / * Modro besedilo je še vedno vidno s 100-odstotno motnostjo * /
Po barvni kodi RGB oznaka »a« pomeni alfa . The alfa parameter je število med 0,0 (popolnoma pregledno) in 1,0 (popolnoma neprozorno).
Nadaljujemo s tem člankom o motnosti v CSS
Spreminjanje motnosti pri učinku lebdenja
V nekaterih primerih spletni oblikovalci želijo, da se motnost spreminja glede na to, ali je uporabnik osredotočen na element ali ne. Recimo, da je slika privzeto nastavljena na 50% motnost. Ko pa uporabnik miško premakne nad sliko, želimo, da se slika popolnoma izostri s 100-odstotno motnostjo.
Primer 4 prikazuje, kako se to naredi.
Splošne točke:
- Nastavitev motnosti je alternativa uporabi atributa 'vidnost' v CSS. Vendar pa z nastavitvijo neprosojnosti enostavno nastavite različne stopnje prosojnosti, od nič do polne.
- Stopnjo motnosti je treba določiti po natančnem preskušanju v različnih brskalnikih. Ko je motnost nastavljena na nizke vrednosti, lahko včasih besedilo ali slika postaneta popolnoma nevidna ali neberljiva.
- Namen uporabe neprosojnosti je osredotočiti se na nekatere elemente, medtem ko drugi elementi v ozadju ne motijo pozornosti uporabnika. Torej so takšni elementi ozadja nastavljeni z manjšo motnostjo.
- V Internet Explorerju je za IE8 in starejše različice lastnost motnosti nastavitev ‘filter’ v razponu od 1 do 100. V vseh drugih brskalnikih je od 0 do 1.
S tem smo prišli do konca tega članka o Opacity In CSS.
rekurzija fibonači c ++
Če vas zanima več o spletnem razvoju, si oglejte avtor Edureka. Izobraževanje za certificiranje spletnega razvoja vam bo pomagalo Naučiti se ustvariti impresivna spletna mesta z uporabo API-jev HTML5, CSS3, Twitter Bootstrap 3, jQuery in Google ter jih razporediti na Amazon Simple Storage Service (S3).
Če vas še vedno zanima Če imate kakršno koli vprašanje, ga lahko objavite v oddelku za komentarje v tem blogu 'Opacity In CSS', mi pa se vam bomo javili v najkrajšem možnem času.