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 printeris 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 20. gadsimta 60. gados, izlaižot Letraset lapas, kas satur Lorem Ipsum fragmentus, un nesen ar darbvirsmas izdošanas 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āpēc šodien mēs runāsim par caurspīdīgums html lapas. 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, kurās 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 to neredzēs vispār caurspīdīgs bloks, 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; filtrs:alpha(necaurredzamī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:

<div stils = "pozīcija: absolūts; augšā: 0; pa kreisi: 0; fona krāsa: rgb(18, 114, 214); platums: 100%; id = "VideoFrame" >

Piemērā tiek izmantots video displeja bloks, kas tiek aktivizēts, noklikšķinot uz video sīktēla. Bloka augstums nav norādīts, jo tas var atšķirties atkarībā no ekrāna izmēra un lapas satura. Tāpēc, atverot video, tas tiek aprēķināts dinamiski. Šīs tehnikas izmantošanas piemēru var redzēt vietnes ruscircus.ru galvenajā lapā, pie kuras es savulaik strādāju.

Tas patiesībā ir viss html caurspīdīguma noslēpums. Mēs izmantojam z-indeksu un necaurredzamību, lai panāktu caurspīdīgu efektu. Un šim nolūkam varat atrast daudz pielietojumu - šeit visu ierobežo tikai jūsu iztēle.

08.02.2013 Atbildēšu uz komentāros uzdotajiem jautājumiem, proti, kā uz caurspīdīga bloka uztaisīt necaurspīdīgu. Šeit viss ir vienkārši, ne velti materiālā norādīju saiti uz materiālu par z indeksu, jums ir jāizveido cits bloks ar augstāku z indeksu nekā caurspīdīgais. Tagad dažu minūšu laikā es ieskicētu piemēru. Bloki:

<div stils = "pozīcija: absolūts; augšā: 0; pa kreisi: 0; fona krāsa: rgb(18, 114, 214); platums: 100%; augstums: 100%; necaurredzamība: 0,30; filtrs:alpha(necaurredzamība=30); redzamība:slēpta; z-indekss:1;" id = "VideoFrame" > <div id = "VideoFrame2" style = "pozīcija: absolūts; augšā: 25%; pa kreisi: 25%; fona krāsa: balta; platums: 50%; augstums: 50%; necaurredzamība: 0,99; filtrs:alpha(necaurredzamība=99); redzamība:slēpta; z-indekss:2;" onclick = "javascript:HideForm();" >Šeit mēs rakstām tekstu</div>

Un javascript funkcijas

< script type= "text/javascript" >function ShowForm() ( document.getElementById ("VideoFrame" ) .style .visibility = "redzams" ; document.getElementById ("VideoFrame2" ) .style .visibility = "redzams" ; ) funkcija HideForm() ( document.getElementBy VideoFrame" ) .style .visibility = "slēpts" ; document.getElementById ("VideoFrame2") .style .visibility = "slēpts" ; )

Pirmā funkcija parāda caurspīdīgu bloku (kopā ar necaurspīdīgu teksta bloku) - to var piesaistīt pogai. saite utt. Otrā funkcija man ir saistīta ar peles klikšķi uz bloka ar tekstu - tas paslēpj caurspīdīgo bloku.

Es ceru, ka esmu sniedzis skaidrību par to, kā tas darbojas. Nu, ja nē, uzdodiet jautājumus.

CSS īpašums 3 necaurredzamībaļauj padarīt vienu vai otru vietnes elementu caurspīdīgu.

Elementa caurspīdīguma pakāpi nosaka vērtība no 0 pirms tam 1 Kur 0 - pilnīgi caurspīdīgs 1 – vispār necaurspīdīgs.. Tā piemēram nozīme 0.5 īpašības necaurredzamība lietots attēlam nozīmē, ka šim attēlam jābūt caurspīdīgam.

Pārredzamība IE

Internet Explorer neatbalsta rekvizītus necaurredzamība tomēr līdz devītajai versijai tai ir savs filtrs, ar kuru var iestatīt caurspīdīguma pakāpi:

filtrs: alfa(necaurredzamība=50)

Nozīme necaurredzamība pārlūkprogrammai Internet Explorer filtrs var atšķirties no 0 - pilnīgi caurspīdīgs 100 - necaurspīdīgs

Šīs izvēlnes bloki būs caurspīdīgi, turot kursoru arī IE!

mājas
Vietnes karte
Pērciet ziloni
Pārdodu ziloni
Izīrē ziloni

Prefiksi.

Principā ar to varētu beigties nodaļa par caurskatāmību, bet vēlos pastāstīt arī par t.s. pārdevēja prefiksi.. šiem biedriem nav īpašas saistības ar šo nodaļu, tomēr, ejot uz priekšu CSS3 apguvē, tie parādīsies arvien biežāk un jums par tiem kaut kur jāparunā - tāpēc es jums pastāstīšu šeit.

Tātad pārdevēja prefiksi ir īpaši CSS rekvizītu prefiksi, ko pārlūkprogrammas izmanto eksperimentāliem īpašumiem, kas nav oficiāli iekļauti CSS specifikācijā.

Mēs atceramies, ka CSS 3 specifikācija joprojām ir izstrādes stadijā un formāli šajā apmācībā aprakstītie rekvizīti dabā nepastāv, taču pārlūkprogrammas jau tos aktīvi izmanto, riskējot un riskējot.

Kāpēc uz savu risku? Jā, jo pastāv iespēja, ka tad, kad CSS 3 specifikācija tiks oficiāli apstiprināta, tajā aprakstītie rekvizīti pēc savas iedarbības atšķirsies no rekvizītiem ar tādu pašu nosaukumu, kurus jau izmanto pārlūkprogrammas. Nu, ejam traki un ļaujam CSS 3 specifikācijas izstrādātājiem noteikt īpašumu necaurredzamība nevis kā bloka caurspīdīguma pakāpe, bet, piemēram, kā tā ēnojums vai mirgošana (protams, es rakstu muļķības), ko pēc tam parādīs miljoniem jau instalētu pārlūkprogrammu, kurām necaurredzamība Vai šī ir caurspīdīgums?

Vai arī pieņemsim, ka pārlūkprogrammas izstrādātāji izdomāja paši savu īpašumu - jauninājumu, kura nevienam citam nekur nav, bet dokuments ar šādu rekvizītu neiztur derīguma pārbaudi, jo specifikācijā tāda nav.

Šo un citu iemeslu dēļ pārlūkprogrammas pievieno rekvizītus, kas neietilpst oficiālajā specifikācijā. Katrai pārlūkprogrammai ir savs prefikss, kas sākas ar zīmi “-”, šī zīme rekvizīta sākumā, kā arī šī “_” zīme saskaņā ar CSS 2.1 specifikāciju nozīmē, ka īpašums ir rezervēts noteiktu CSS paplašinājumiem. pārlūkprogrammas.

Šeit ir populārākās pārlūkprogrammas un to prefiksi:

Pārlūkprogramma	Priedēklis
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 un jaunāka versija	-jaunkundze-
Safari līdz versijai 3, Konqueror	-khtml-
Safari 3 un jaunākas versijas, Google Chrome	-tīmekļa komplekts-

Ir ļoti vienkārši izmantot prefiksus, vienkārši paņemiet jebkuru CSS rekvizītu un aizstājiet to ar vēlamo prefiksu, piemēram, ar īpašumu necaurredzamība aizstājējs -moz- izrādās: -moz-necaurredzamība

Lai gan patiesībā mana izteiksme " izmantojiet prefiksus"nepareizi! patiesībā nekur nekas netiek aizstāts, vienkārši ir īpašums necaurredzamība, vai tur -moz-necaurredzamība un tās ir divas dažādas īpašības, kurām nav obligāti jāpilda viena un tā pati funkcija!! - tas ir jāsaprot..

Jums arī jāsaprot, ka noteiktas konkrētas pārlūkprogrammas, līdz pat noteiktām versijām, var atbalstīt tikai CSS rekvizītus ar saviem prefiksiem (atkal es nepareizi izteicos, ir pareizi teikt jūsu rekvizītus - pārlūkprogrammas CSS paplašinājumi), un sākotnēji var paļauties par specifikācijām, pat ja tās tiek izstrādātas. – Šajā mācību grāmatā aplūkosim katru konkrēto gadījumu atsevišķi.

Runājot par šo nodaļu par caurspīdīgumu, jāatzīmē, ka Firefox 3.5 un tās iepriekšējās versijas izmanto savu īpašumu -moz-necaurredzamība, un pārlūkprogramma Safari līdz versijai 1.1 izmanto tās īpašumu -khtml-necaurredzamība .

Tātad, lai mūsu piemērs būtu pilnībā saderīgs ar vairākām pārlūkprogrammām, kodam jāpievieno vēl dažas rindiņas:

Kā redzat, prefiksi ievērojami izstiepj kodu un to izmantošana ne vienmēr ir attaisnojama, ja pārlūkprogrammu versijas, kas vēlas strādāt ar noteiktiem rekvizītiem, izmantojot tikai to prefiksus, ir diezgan vecas, kā tas ir rekvizīta gadījumā. necaurredzamība, tad tie nav jānorāda.. – lai gan tas, protams, ir slikts padoms..

Nu, tagad daži noderīgi padomi...

Vienmēr lietojiet prefiksus (protams, ja vien konkrēta pārlūkprogramma bez tiem nevar iztikt) gadījumos, kad izmantotais īpašums var būtiski ietekmēt vietnes veiktspēju, lasāmību un lietojamību. Viena lieta ir, ja daži sīkumi vietnes dizainā nedarbojas, un pavisam cita lieta, ja, piemēram, vietnes izvēlne nedarbojas vai nav iespējams lasīt tekstu vietnē, jo pārlūkprogramma nedarbojas. neatbalsta kādu īpašumu un tā vietā izmanto līdzīgu.

CSS caurspīdīgums pēdējā laikā ir diezgan moderns paņēmiens, kas rada grūtības ieviešanā starp pārlūkprogrammām. Joprojām nav universālas metodes, kas ļautu ieviest caurspīdīgumu visās pārlūkprogrammās. Tomēr pēdējā laikā situācija ir ievērojami uzlabojusies.

Šajā rakstā ir sniegts detalizēts apskats par esošajām pieejām, kā arī kodu piemēri un skaidrojumi, kas palīdzēs ar minimālu piepūli sasniegt vienādu rezultātu visās pārlūkprogrammās.

Viena lieta, ko vērts pieminēt, ir tāda, ka, lai gan caurspīdīgums pastāv jau vairākus gadus, tā nekad nav bijusi daļa no CSS standarta. Šis ir nestandarta rekvizīts, kam vajadzētu būt daļai no CSS3 specifikācijas.

Vecā pieeja

Vecākajās Firefox un Safari versijās rekvizīts ir jāizmanto šādi:

#myElement ( -khtml-necaurredzamība: .5; -moz-necaurredzamība: 0,5; )

Rekvizīts -khtml-necaurredzamība tika izmantots vecākās tīmekļa komplektu pārlūkprogrammu versijās. Šis īpašums ir novecojis un vairs nav vajadzīgs, ja vien neesat pārliecināts, ka ievērojamu daļu no jūsu vietnes trafika veido apmeklētāji, kuri izmanto Safari 1.x, kas, protams, ir maz ticams.

Nākamajā rindā tiek izmantots rekvizīts -moz-opacity, kas darbojās ļoti agrīnās Mozilla dzinēja versijās. Firefox pārtrauca to atbalstīt versijā 0.9.

CSS caurspīdīgums pārlūkprogrammās Firefox, Safari, Chrome un Opera

Lielākajai daļai mūsdienu pārlūkprogrammu ir pietiekami izmantot šādu rekvizītu:

#myElement (necaurredzamība: .7; )

Iepriekš minētajā piemērā elements ir iestatīts uz 70% necaurredzamību (30% caurspīdīgumu). Tas ir, ja mēs iestatīsim vērtību uz vienu, elements būs necaurspīdīgs, un attiecīgi, iestatot šo vērtību uz nulli, tas kļūs neredzams.

Necaurredzamības īpašība apstrādā 2 ciparus aiz komata. Tas nozīmē, ka vērtība ".01" atšķirsies no vērtības ".02", lai gan tas nav pamanāms.

CSS caurspīdīgums pārlūkprogrammai Internet Explorer

Kā parasti, Internet Explorer nav draudzīgs ar citām pārlūkprogrammām. Turklāt mums tagad ir diezgan plaši izmantotas trīs šīs pārlūkprogrammas versijas, kuru caurspīdīguma iestatījums katrā ir atšķirīgs un dažreiz prasa papildu pūles, lai iegūtu pozitīvu rezultātu.

#myElement ( filtrs: alfa(necaurredzamība=40); )

Šajā piemērā tiek izmantots filtra rekvizīts, kas darbojas 6.–8. versijā, taču versijām 6 un 7 ir viens ierobežojums: elementa rekvizīta hasLayout vērtībai ir jābūt iestatītai uz true . Šis īpašums ir pieejams tikai IE, un par to varat lasīt vairāk, piemēram, vietnē Habré.

Vēl viens veids, kā iestatīt caurspīdīgumu, izmantojot CSS IE8, ir izmantot šādu pieeju (ņemiet vērā komentārus):

#myElement ( filtrs: progid:DXImageTransform.Microsoft.Alpha(necaurredzamība=40); /* darbojas operētājsistēmās IE6, IE7 un IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(necaurredzamība=40)"; / * tikai IE8 */ )

Pirmā rinda darbosies visās šobrīd izmantotajās versijās, otrā – tikai IE8. Ņemiet vērā, ka otrajā rindā tiek izmantots prefikss -ms- un vērtība ir pēdiņās.

CSS caurspīdīguma iestatīšana un mainīšana, izmantojot JavaScript vai jQuery

Lai iestatītu caurspīdīgumu, varat izmantot šādu kodu:

Document.getElementById("mans elements").style.opacity = ".4"; // lielākajai daļai pārlūkprogrammu document.getElementById("myElement").style.filter = "alpha(necaurredzamība=40)"; // priekš IE

Protams, šajā gadījumā ir daudz vieglāk izmantot jQuery, turklāt tas darbosies visās pārlūkprogrammās:

$("#myElement").css((necaurredzamība: .4 )); // darbojas visās pārlūkprogrammās

Varat animēt šo īpašumu:

$("#myElement").animate(( necaurredzamība: .4 ), 1000, function() ( // Animācija ir pabeigta; šis kods darbojas visās pārlūkprogrammās. ));

RGBA funkcija

CSS3 plāno atbalstīt alfa kanālus, izmantojot rgba funkciju. Šī funkcija darbojas pārlūkprogrammās Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. To lieto šādi:

#rgba ( fons: rgba(98, 135, 167, .4); )

Šajā gadījumā pēdējais parametrs norāda necaurredzamības līmeni.

HSLA funkcija

Līdzīgi kā iepriekšējā funkcijā, arī CSS3 ļauj iestatīt daļēji caurspīdīgu krāsu, izmantojot HSLA funkciju, kuras parametri ir Hue, Saturation, Lightness un Alpha channel.

#hsla (fons: hsla(207, 38%, 47%, .4); )

Svarīgs punkts, izmantojot funkcijas rgba un hsla, ir tas, ka caurspīdīguma iestatījums netiek piemērots pakārtotajiem elementiem, savukārt necaurredzamības rekvizīta izmantošana tiek mantota.

Lai kontrolētu lapas elementu caurspīdīgumu, izmantojiet CSS necaurredzamības rekvizītu. Saskaņā ar specifikāciju tas attiecas uz jebkura veida mezgliem un tiek atbalstīts visās mūsdienu pārlūkprogrammās. Ar tās palīdzību jūs varat izveidot interesantu dizainu vai ieviest ērtu interaktīvu lietotāja mijiedarbību.

Iespējamās vērtības

Necaurredzamības rekvizīta sintakse programmā css izskatās šādi:

Selektors (necaurredzamība: 1; ) selektors (necaurredzamība: 0; ) selektors (necaurredzamība: 0,4; )

Ievade pieņem skaitliskās vērtības diapazonā no 0 līdz 1. Parametrs var attēlot vieninieka daļas, savukārt punkts tiek izmantots kā veselo skaitļu un daļskaitļu daļas atdalītājs CSS.

Elements ar nulles caurspīdīgumu kļūst neredzams, bet joprojām turpina ieņemt savu vietu lapā un saglabā iespēju mijiedarboties ar lietotāju.

Ja īpašuma vērtība nav nulle, tad faktiskā caurspīdīgums tiks aprēķināts procentos no kādas augšējās robežas. Parastā situācijā necaurredzamība: 1 nosaka elementa pilnīgu necaurredzamību.

Bērnu mezglu caurspīdīgums

Tomēr, ja elementam ir vecākais, kura caurspīdīgums atšķiras no viena, aprēķins mainās. Pēcnācējs nevar būt "mazāk caurspīdīgs" nekā jebkurš no saviem priekštečiem. Vecākā bloka necaurredzamības CSS rekvizīta vērtība kļūst par pakārtotā mezgla necaurredzamības augšējo robežu.

Vecāks (necaurredzamība: 0,7; ) bērns (necaurredzamība: 1; )

Šādā situācijā pakārtotais elements būs 30% caurspīdīgs, lai gan necaurredzamības vērtība ir viena.

Lietošanas piemēri

1. piemērs. Caurspīdība. Ir nepieciešams, lai bloka galvenais fons būtu redzams zem mērķa elementa.

Mērķis (fons: melns; necaurredzamība: 0,5; )

Caurspīdīgs kļūst ne tikai mērķa bloka fons, bet arī teksts.

2. piemērs. Dinamiskā caurspīdīguma kontrole. Mērķa bloka CSS necaurredzamības rekvizīta vērtība mainās, virzot kursoru virs tā.

Target ( necaurredzamība: 0,2; ) .target:hover ( necaurredzamība: 1; )

Dinamiskā caurspīdīgums

Pēdējais piemērs parāda, ka caurspīdīgi elementi turpina reaģēt uz lapas notikumiem, piemēram, kursora novietošanu. Tas ļauj izmantot JavaScript, lai kontrolētu CSS necaurredzamības rekvizītu, kā arī izmantot pārejas un animācijas mehānismus, lai vienmērīgi mainītu displeja režīmu.

Lai piekļūtu caurspīdīgumam no skripta, jums ir jāpiekļūst konkrēta elementa stila objektam.

// pašreizējās necaurredzamības vērtības iegūšana var opacity = element.style.opacity; // jaunas vērtības iestatīšana elements.style.opacity = 0,4;

Bloka vienmērīgu pazušanu var panākt, izmantojot CSS pārejas īpašību:

Elements (caurredzamība: 0,1; pāreja: necaurredzamība 1000 ms; ) elements:hover (necaurredzamība: 0,8; pāreja: necaurredzamība 2000 ms; )

Tagad elementa mezgls, novietojot peles kursoru, vienas sekundes laikā mainīs caurspīdīgumu no 10 līdz 80%, un, kursoram aizejot, divu sekunžu laikā tas tiks aptumšots līdz sākotnējai vērtībai.

CSS necaurredzamības īpašība apvienojumā ar pārejas mehānismu ļauj radīt skaistus efektus.

Alfa kanāls necaurredzamības vietā

Galvenie necaurredzamības mehānisma smalkumi CSS:

• tā ietekme attiecas ne tikai uz bloka fonu, bet arī uz tā teksta saturu, ko vēlams atstāt skaidru;
• pakārtotie elementi nevar būt mazāk caurspīdīgi nekā to vecāku elementi.

Ja šie efekti sarežģī izkārtojuma dizainera darbību, necaurredzamības vietā izmantojiet vienkāršu caurspīdīgu fonu, definējot tā vērtību RGBA vai HSLA formātā.

Vlads Merževičs

Elementa caurspīdīgais efekts ir skaidri redzams fona attēlā un ir kļuvis plaši izplatīts dažādās operētājsistēmās, jo tas izskatās stilīgi un skaisti. Tīmekļa dizainā tiek izmantota arī caurspīdīgums, kas tiek panākts, izmantojot necaurredzamības īpašību vai RGBA krāsu formātu, kas iestatīts fonam.

Gradienta bloks

Izveidojiet bloku, kas parādīts attēlā. 1. Blokā ir caurspīdīgs gradienta rāmis ar gradienta fonu zem virsraksta un nelielu rādītāju. Lapas fons ir paredzēts tikai caurspīdīguma efekta skaidrības labad. Jūs varat norādīt jebkuru savu attēlu. Minimālais bloka augstums ir 100 pikseļi.

Kā padarīt slāni daļēji caurspīdīgu?

Lai mainītu elementa caurspīdīguma pakāpi, izmantojiet necaurredzamības stila īpašību ar vērtību no 0 līdz 1, kur 0 atbilst pilnīgai caurspīdīgumam, bet 1, gluži pretēji, objekta necaurredzamībai. Šis rekvizīts nedarbojas pārlūkprogrammā Internet Explorer, tāpēc jums ir jāizmanto īpaši tam paredzētais filtrs — rekvizīts, kas neietilpst CSS specifikācijā. 1. piemērā parādīts, kā iestatīt slāņa caurspīdīgumu visām pārlūkprogrammām.

Caurspīdīgs fons

Vlads Merževičs

Daļēja caurspīdīgums, pareizi lietojot, izskatās ļoti iespaidīgi vietnes dizainā. Galvenais ir tas, ka zem caurspīdīgiem blokiem ir nevis monohromatisks dizains, bet gan attēls, kas kļūst pamanāms. Šis efekts tiek sasniegts daudzos veidos, un, ja atceraties visas, tostarp vecmodīgās metodes, tas ir PNG attēla izmantošana kā fons, radot rūtainu attēlu un necaurredzamības īpašību. Bet, tiklīdz rodas vajadzība izveidot caurspīdīgu fonu blokā, šīm metodēm ir nepatīkams mīnuss. Uztaisīšu nelielu apskatu, lai būtu skaidrs, par ko ir runa, kā arī tiem lasītājiem, kuri nav pazīstami ar netradicionālām caurspīdīga efekta radīšanas iespējām.

Kā iestatīt tabulu, lai tā būtu caurspīdīga, bet dažas šūnas nav?

Lai mainītu elementa caurspīdīgumu, CSS3 nodrošina necaurredzamības īpašību, tā vērtība var mainīties no 0 līdz 1. Nulle atbilst elementa pilnīgai caurspīdīgumam, bet viens, gluži pretēji, necaurredzamībai. Mūsdienu pārlūkprogrammas ar šo rekvizītu darbojas diezgan pareizi, izņemot pārlūkprogrammu Internet Explorer, tāpēc tam ir jāizmanto īpašs filtra rekvizīts ar vērtību alfa(Opacity=X) , kur X var mainīties no 0 līdz 100.