Viss, kas jums jāzina par CSS necaurredzamību

Šis raksts jūs iepazīstinās ar koncepciju, kas palīdzēs jums saprast necaurredzamību un pastāstiet, kā kontrolēt šo parametru. Šajā rakstā tiks apskatīti šādi norādījumi,

• Neskaidrība CSS
• Necaurredzamība mantota ar kaskādes elementiem
• RGBA atribūtu iestatījums kaskādes elementiem
• Pārklāšanās efekta necaurredzamība mainās

Elementa fona necaurredzamība ir noderīgs funkciju iestatījums HTML dizainā. Nosakot necaurredzamības līmeni (apgrieztība pret pārredzamību), dizainers var kontrolēt elementa redzamību, izmantojot CSS necaurredzamības īpašību. To parasti izmanto kā fona iestatījumu, ja elementi atrodas kaskādē, kas novietoti viens virs otra.

Visizplatītākais scenārijs, kurā tiek izmantota šī funkcija, ir šāds:

• Daļēji caurspīdīgs fona attēls tiek ievietots aiz teksta elementa.
• Fona attēls ir miglaini redzams, tāpēc tas nedominē priekšā esošajā tekstā.
• Attēls var pilnībā fokusēties, kad lietotājs skaidri izvēlas to redzēt.

Jūs varētu vēlēties izlasīt pirms mācīties par CSS necaurredzamību.

Lai iegūtu visaptverošu CSS apmācību, apmeklējiet vietni Edureka CSS apmācība iesācējiem . Jūs iegūsiet lielisku uzmanību, kā CSS jāizmanto HTML tīmekļa dizaina uzlabošanai.

Turpinot šo rakstu par necaurredzamību CSS

Neskaidrība CSS

CSS necaurredzamība ir iestatīta kā skaitliska vērtība, kas svārstās no 0,0 līdz 1,0. Vērtības, kas tuvākas nullei, atspoguļo lielāku caurspīdīgumu, attēls būs ļoti viegli redzams. Sāksim ar attēla parādīšanas piemēru ar 50% pārredzamību. Skatiet 1. piemēru zemāk.

1. piemērs: fona attēls ir iestatīts uz daļēji pārredzamība

kā izmantot google mākoņa platformu

img {necaurredzamība: 0,5 filtrs: alfa (necaurredzamība = 50) / * IE8 un vecākām versijām * /}  

1. piemērs: izeja

Sākotnējais attēls (100% necaurredzamība)

Attēls ar 50% necaurredzamības iestatījumu

Iepriekš minētajā piemērā bija tikai viens elements - attēls. Citus elementus var iestatīt arī ar necaurredzamības parametru, piemēram, tekstu, div elementus un tā tālāk.

Turpinot šo rakstu par necaurredzamību CSS

Necaurredzamība mantota ar kaskādes elementiem

Ja elementi ir sakrauti viens virs otra un ja fona elementam ir necaurredzamības iestatījums, tad to pārmanto visi pakārtotie elementi. Tas ir noklusējuma iestatījums . Tas nozīmē, ka, ja virs attēla ir ievietots tekstlodziņš un attēlam ir iestatīts necaurredzamības iestatījums 0,5, tad gan attēls, gan teksta elements būs redzami tikai daļēji.

Nākamajā piemērā ņemsim bērnu teksta elementu, kas novietots virs TOM & JERRY attēla. Noklusējuma necaurredzamības efektu mēs varam redzēt 2. piemērā.

.container {position: relatīvā teksta izlīdzināšana: centra necaurredzamība: 0.5} .centered {position: absolūtā augšdaļa: 50% pa kreisi: 50% transformācija: tulkojums (-50%, -50%) krāsa: zils fonta lielums: 40px} } TOMS & Džerijs

2. piemērs: teksts manto necaurredzamību no vecāku attēla

java attālās metodes izsaukšanas piemērs

Turpinot šo rakstu par necaurredzamību CSS

RGBA atribūtu iestatījums kaskādes elementiem

Ir vēl viens veids, kā necaurredzamību var kontrolēt ar kaskādes elementiem. Ja vēlaties, lai bērna elementu neietekmētu tā fona elementa necaurredzamība, varat to izmantot RGBA atribūtu iestatījums .

3. piemērs: RGBA iestatījuma izmantošana

fons: rgba (76, 175, 80, 1,0) / * Attēlā nav iestatīts necaurredzamības iestatījums * / / * Zaļš fons tekstam ar 100% necaurredzamību * / / * Zilā krāsā tekstam ir 100% necaurredzamība * /

fons: rgba (76, 175, 80, 0,4) / * Attēlam nav iestatīts necaurredzamības iestatījums * / / * Zaļš fons tekstam ar 40% necaurredzamību * / / * Zils teksts joprojām redzams ar 100% necaurredzamību * /

Pēc RGB krāsu koda atribūts ‘a’ apzīmē alfa . The alfa parametrs ir skaitlis starp 0,0 (pilnīgi caurspīdīgs) un 1,0 (pilnīgi necaurspīdīgs).

Turpinot šo rakstu par necaurredzamību CSS

Pārklāšanās efekta necaurredzamība mainās

Dažos gadījumos tīmekļa dizaineri vēlas, lai necaurredzamība mainītos atkarībā no tā, vai lietotājs ir koncentrējies uz elementu. Pieņemsim, ka pēc noklusējuma attēls ir iestatīts uz 50% necaurredzamību. Tomēr, kad lietotājs novieto peles kursoru virs attēla, mēs vēlamies, lai attēls būtu pilnībā fokusēts ar 100% necaurredzamību.

4. piemērs parāda, kā tas tiek darīts.

kas ir atslēgkļūda pitonā

Kopīgi piebildes:

• Necaurredzamības iestatīšana ir alternatīva atribūta ‘visibility’ izmantošanai CSS. Tomēr, izmantojot necaurredzamības iestatījumu, ir viegli iestatīt dažādas caurspīdīguma pakāpes, sākot no nulles līdz pilnīgai.
• Necaurredzamības līmenis jānosaka pēc rūpīgas pārbaudes dažādās pārlūkprogrammās. Ja necaurspīdība ir iestatīta uz zemām vērtībām, dažreiz teksts vai attēls var kļūt pilnīgi neredzams vai nelasāms.
• Necaurredzamības izmantošanas ideja ir koncentrēt uzmanību uz dažiem elementiem, savukārt citi fona elementi nenovērš lietotāja uzmanību. Tātad šādi fona elementi ir iestatīti ar mazāku necaurredzamību.
• Programmā Internet Explorer IE8 un vecākām versijām necaurredzamības rekvizīts ir iestatījums “filtrs”, kas svārstās no 1 līdz 100. Visos pārējos pārlūkos tas svārstās no 0 līdz 1.

Tas noved mūs pie šī raksta par CSS necaurredzamību beigām.

Ja vēlaties uzzināt vairāk par tīmekļa izstrādi, skatiet vietni autore Edureka. Tīmekļa attīstības sertifikācijas apmācība palīdzēs jums uzzināt, kā izveidot iespaidīgas vietnes, izmantojot HTML5, CSS3, Twitter Bootstrap 3, jQuery un Google API, un izvietot to Amazon Simple Storage Service (S3).

Ja jūs joprojām interesējat, ja jums ir kādi jautājumi, varat tos ievietot šī emuāra “Opacity In CSS” komentāru sadaļā, un mēs pēc iespējas ātrāk sazināsimies ar jums.