Šajā nodarbībā apskatīsim šādus CSS rekvizītus – necaurredzamību un RGBA. Rekvizīts Opacity ir atbildīgs tikai par elementu caurspīdīgumu, savukārt funkcija RGBA ir atbildīga par krāsu un caurspīdīgumu, ja norādāt alfa kanāla caurspīdīguma vērtību.

CSS caurspīdīgums Necaurredzamība

Necaurredzamības digitālā vērtība ir iestatīta diapazonā no 0,0 līdz 1,0, kur nulle ir pilnīga caurspīdīgums, bet viens, gluži pretēji, ir absolūta necaurredzamība. Piemēram, lai redzētu 50% caurspīdīgumu, jums jāiestata vērtība uz 0,5. Jāpatur prātā, ka necaurredzamība attiecas uz visu bērnu elementi vecāks. Tas nozīmē, ka arī teksts uz caurspīdīga fona būs caurspīdīgs. Un tas ir ļoti būtisks trūkums; teksts tik labi neizceļas.

Pārredzamība, izmantojot CSS Opacity

Ekrānuzņēmums skaidri parāda, ka melnais teksts ir kļuvis tikpat caurspīdīgs kā zilais fons.

Div(
fons: url(attēli/jūsuattēls.jpg); /* Fona attēls */
platums: 750 pikseļi;
augstums: 100 pikseļi;
piemale: auto;
}
.blue(
fons: #027av4; /* Krāsa caurspīdīgs fons */
necaurredzamība: 0,3; /* Fona caurspīdīguma vērtība */
augstums: 70 pikseļi;
}
h1 (
polsterējums: 6px;
fontu saime: Arial Black;
fonta svars: treknāks;
fonta izmērs: 50 pikseļi;
}

CSS caurspīdīgums RGBA formātā

RGBA krāsu formāts ir modernāka alternatīva necaurredzamības īpašībai. R (sarkans), G (zaļš), B (zils) – nozīmē: sarkans, zaļš, zils. Pēdējais burts A apzīmē alfa kanālu, kas nosaka caurspīdīgumu. RGBA, atšķirībā no Opacity, neietekmē bērnu elementus.

Tagad apskatīsim mūsu piemēru, izmantojot RGBA. Aizstāsim šīs rindas stilos.

Fons: ##027av4; /* Fona krāsa */
necaurredzamība: 0,3; /* fona caurspīdīguma vērtība */

uz nākamo vienu rindiņu

Fons: rgba(2, 127, 212, 0,3);

Kā redzat, caurspīdīguma vērtība 0,3 abām metodēm ir vienāda.

RGBA piemēra rezultāts:

Otrais ekrānuzņēmums izskatās daudz labāk nekā pirmais.

Spēlējoties ar bloku fona caurspīdīgumu, jūs varat sasniegt interesantus efektus savā vietnē. Ir svarīgi, lai šie caurspīdīgie bloki tiktu papildināti ar krāsainu dizainu, piemēram, fotogrāfiju. Tikai šajā gadījumā efekts būs pamanāms. Šis paņēmiens dizainā tika izmantots jau ilgu laiku, pat pirms jebkura CSS3 parādīšanās, tas tika ieviests tikai grafikas programmās.

Ja klients pieprasa, lai izkārtojums izskatās labi vecākās pārlūkprogrammas versijās Internet Explorer, tad pievienojiet filtra rekvizītu un neaizmirstiet to komentēt, lai neciestu koda derīgums.

.blue (
fons: rgba(0, 120, 201, 0,3);
filtrs: alfa(necaurredzamība=30); /* Pārredzamība IE */
}

Secinājums

RGBA formātu atbalsta visas mūsdienu pārlūkprogrammas, izņemot Internet Explorer. Ir arī ļoti svarīgi, lai RGBA būtu elastīga, tā iedarbojas tikai uz konkrētu elementu, neietekmējot tā bērnus. Skaidrs, ka maketētājam tā ir ērtāk. Mana izvēle noteikti ir par labu RGBA formātam, lai panāktu caurspīdīgumu CSS.

Lai nodrošinātu labāku materiāla konsolidāciju un lielāku skaidrību, iesaku jums iet cauri.

orem Ipsum ir vienkārši drukas un salikšanas nozares fiktīvais teksts. Lorem Ipsum ir bijis nozares standarta fiktīvais teksts kopš 1500. gadiem, kad nezināms iespiedējs paņēma drukas kambīzi un izveidoja burtnīcas paraugu grāmatu. Tas ir pārdzīvojis ne tikai piecus gadsimtus, bet arī lēcienu elektroniskajā salikšanā. Tas tika popularizēts 1960. gados, izlaižot Letraset lapas, kas satur Lorem Ipsum fragmentus, un pavisam nesen ar darbvirsmas izdevējdarbības programmatūru, piemēram, Aldus PageMaker, tostarp Lorem Ipsum versijas.
Jau sen ir pierādīts, ka, aplūkojot lapas izkārtojumu, lasītāja uzmanību novērsīs lasāmais lapas saturs. Lorem Ipsum izmantošanas jēga ir tāda, ka tai ir vairāk vai mazāk normāls burtu sadalījums pretstatā "Saturs šeit, saturs šeit" izmantošanai, lai tas izskatās kā lasāms angļu valodā. Daudzas darbvirsmas izdevējdarbības pakotnes un tīmekļa lapu redaktori tagad izmanto Lorem Ipsum kā noklusējuma modeļa tekstu, un, meklējot “lorem ipsum”, tiks atklātas daudzas tīmekļa vietnes, kas vēl ir sākumstadijā. Gadu gaitā ir izveidojušās dažādas versijas, dažreiz nejauši, dažreiz ar nolūku (injicēts humors un tamlīdzīgi).

Tātad, šodien mēs runāsim par caurspīdīgumu html lapās. Jūs, iespējams, esat saskāries ar caurspīdīgiem uznirstošiem blokiem, neatkarīgi no tā, vai tā ir fotoattēlu galerija vai pieteikšanās veidlapas kādā populārā vietnē. HTML caurspīdīgumam ir daudz pielietojumu. Tātad, kā tas tiek izgatavots un kur to var izmantot?

Pirmkārt, sapratīsim, ka mūsu dokumentam nav tikai viena monitora plakne - tas parasti ir trīsdimensiju, es to minēju rakstā “Z-indekss”. Attiecīgi pat pilnīgi caurspīdīgs slānis, ja tas būtu displeja kaudzes augšpusē, bloķētu piekļuvi citiem elementiem. Šis ir viens no galvenajiem caurspīdīgo bloku izmantošanas veidiem. Lai gan parasti tiek izmantots ēnojuma efekts, pilnīgi caurspīdīgs slānis darbosies tieši tāpat. Tā, piemēram, darbojas daudzas populāras fotoattēlu galerijas; tiek organizēts ēnots slānis, kurā tiek parādīti fotoattēli un to vadīklas. Pārējā lapas daļa ir “pārklāta” ar (daļēji) caurspīdīgu slāni, kas bloķē piekļuvi visiem citiem lapas elementiem. Tie. Jūs nevarēsiet atstāt lapu, noklikšķinot uz jebkuras saites - viss teksts ir pārklāts ar fonu. Lai atgrieztos vietnes pamattekstā, tie parasti nodrošina vadīklas galerijas aizvēršanai, pieteikšanās veidlapu utt. Kontrolējiet caurspīdīgu bloku rādīšanu/slēpšanu, izmantojot JavaScript. Diemžēl tam nav alternatīvas. Neizmantojot to, lietotājs vai nu neredzēs caurspīdīgo bloku vispār, vai arī nevarēs to aizvērt, neizejot no pašreizējās lapas. Es atzīmēju, ka šim nolūkam tiek izmantotas redzamības vai displeja īpašības.

Tātad, kā pārredzamība faktiski tiek organizēta html? Elementa caurspīdīguma iestatīšana parasti nav iekļauta CSS specifikācijā, tāpēc, lai to izveidotu, ir jāizmanto vairākas instrukcijas vienlaikus. Dažas pārlūkprogrammas (ti) darbosies ar vienu opciju, citas ar citu. Ti izmanto iebūvēto filtra funkcionalitāti, citas pārlūkprogrammas izmanto īpašību "necaurredzamība", kas ir iestatīta diapazonā no 0 (pilnīgi caurspīdīgs objekts) līdz 1 (pilnīgi necaurspīdīgs). Piemēram, ja caurspīdīgums ir 30%, jums vajadzētu rakstīt "necaurredzamība:0.30; filter:alpha(caurredzamība=30);". Īpašības, kā redzams no piemēra, ir līdzīgas - tikai pirmajā gadījumā tiek izmantots skaitlis no 0 līdz 1, otrajā tiek izmantots procentuālais apzīmējums. Šāda bloka piemērs: