CSS obala ngemuva. Ingemuva elikhanyayo noma umbhalo nge-CSS

Njengoba sekunama-CSS3 nabaqambi bamawebhu ukusebenza ngezindlela eziningi sekulula futhi okunengqondo ngaphezulu: phela ungakwazi manje ngempela kalula oyifisayo iyiphi into, kancane njalo asesebenzisa i-JavaScript. Ake sithi kudingeka ulungise obala ngemuva - CSS ngokushesha inikeza izinketho eziningana.

Ingemuva kuchazwe iqoqo izimfanelo (isizinda-image, ingemuva-isikhundla , ingemuva-usayizi, ingemuva ukuphinda, ingemuva-okunamathiselwe, ingemuva-imvelaphi, ingemuva-clip, umbala ongemuva), ngalinye elikwazi zabelwe eceleni noma ahlanganiswa ukuba abe ngaphansi ngemfanelo ngemuva. Ake sihlole ngamunye wabo ngokuningiliziwe.

Chasisa umbala ongemuva

Ngo-CSS, umbala wesizinda kungenziwa isethwe ngezindlela eziningana: usebenzisa ikhodi hex, igama umbala noma RGB-entry. Ngo CSS3 sebekwazi ukusebenzisa esikhundleni RGB-ukuqoshwa inketho nge RGBA.

Hex ikhodi umbala silotshwe impahla emva ngehele: umbala ongemuva: # FFDAB9. Uma izinhlamvu kule entry kukhona ngazimbili esifanayo, ikhodi ngokuvamile Imi kancane: # ccff00 singatlolwa bunjesi # cf0:

umzimba {umbala ongemuva: # cf0 ;}.

Igama, ngisho imibala ezithandeka kakhulu. Ngokwesibonelo, ngaphezu obomvu ejwayelekile nomhlophe ungasebenzisa NavajoWhite (#FFDEAD) noma Honeydew2 (# E0EEE0):

umzimba {umbala ongemuva: onsomi; }.

Inketho wesibili RGB noma RGBA entry ikuvumela ukuba ucacise umbala nje kuphela kodwa futhi obala of ngemuva CSS, kodwa indlela usebenza kuphela IE izinguqulo ezindala kuka 9. Ezinye iziphequluli ukuqaphela inguqulo evamile obala. Ngokuvumelana nezindinganiso W3C Kungcono ukusebenzisa namanje RGBA esikhundleni kulapho RGB evamile.

Inani wokugcina RGBA ngemuva bese ubeka opacity kusuka 0 (ngale) kuya ku-1 (opaque).

Kukhona ezinye amagugu engavamile. Umbala wesizinda kungenziwa isethwe usebenzisa HSL futhi HSLA. Bobabili engezwe CSS3, ngakhoke ifoni awasekelwe yiwo IE enguqulweni 9 noma ngaphezulu. Embodiments RGB ezifanayo noma RGBA, kuphela ngefomethi ehlukile: Hue (umthunzi - Inani leli sondo umbala, kunikezwe degrees), bazogcwalisa (ukugcwaliswa - umbala ngamandla njengoba amaphesenti, kusuka 0 kuya 100), Lightness (ukudlala - ukukhanya, kulinganiswa efanayo ipharamitha bazogcwalisa ).

Chasisa isizinda-image

Kakhulu cross-inguqulo yesiphequluli isizinda esobala - lena ukusetshenziswa isithombe. Ngo CSS3, ungasetha izithombe nakakhulu, lokhu kwenziwa ngokusebenzisa ukhefana. Ngokwesibonelo:

{Ngemuva-ngomzimba: -url (bg1.png), i-url (bg2.png)}.

Le ndlela ukusekela ngisho IE8. izithombe eziningana isizinda iraba esetshenziswa kusakhiwo. Okubalulekile, ungakhohlwa ukusebenzisa noma isiphi isithombe bese usetha umbala CSS, njengoba abasebenzisi umane ulayishe isithombe.

Chasisa isizinda-isikhundla

Uma usebenzisa umfanekiso ukusetha iyunithi ingemuva, CSS ikuvumela ukuba libeke umfanekiso noma ikuphi esikrinini. Ngokuzenzakalelayo, isithombe Itholakala ekhoneni eliphezulu esinxeleni. Mnikeni uthatha noma nemiyalezo yomlomo (phezulu, phansi, esinxeleni, kwesokudla), a zezinombolo (isithakazelo, Amaphikseli nezinye amayunithi). Kulokhu, kuzomele ucacise amanani amabili, enezingqimba futhi mpo:

umzimba {ngemuva-isikhundla: isikhungo esifanele ;} - kulesi sibonelo, iphethini uzobe elise ohlangothini kwesokudla sekhasi, phezulu kanye phansi ibanga isithombe esifanayo.

Chasisa isizinda-usayizi

Ngesinye isikhathi kuyadingeka ukuba zimboze ngemuva CSS nobe sinciphise ubukhulu bayo. Ukuze wenze lokhu, sebenzisa ngemfanelo isizinda-usayizi, kanye nobukhulu ngemuva ungabekwa pixels noma amaphesenti, kanye nanoma yimiphi eminye amayunithi.

Nge le mfanelo, zikhona ezinye izinkinga: ukukhonjiswa onembile zangemuva izinguqulo ezandulele sicalo isiphequluli isetshenziswe. Yiqiniso, inguqulo yamanje isekela ngokuzeleko le mfanelo futhi isidingo izakhiwo ezithile wanyamalala.

Chasisa ongemumva okunamathiselwe

Lesi sibaluli icacisa ukuziphatha izithombe ngemuva ngenkathi ebonakalayo. Ngakho, kungase kuthathe amagugu 3 (angafaki ifa, ingqikithi for zonke izimfanelo okuxoxwe ngazo kulesi sihloko):

• okungaguquki - yenza isithombe sangemuva fixed;
• pheqela - imiqulu ngemuva nalo lonke izakhi;
• lendawo - isithombe kungemuva is kuskrolelwa uma Ukuphenya elinokuqukethwe. Ingemuva kungaphezu okuqukethwe ifreyimu iqinile.

Isibonelo ukusetshenziswa:

umzimba {ngemuva-okunamathiselwe fixed}.

Okwamanje, i-Firefox ayisekeli impahla lokugcina (sendawo).

Chasisa isizinda-imvelaphi

Lesi sibaluli unesibopho element ukuma. iziphequluli Early ezidinga ukusetshenziswa ticalo. Impahla ngokwayo unamapharamitha ezintathu:

• ukupheda kwebhokisi ibekwe isihlobo esibonelweni onqenqemeni, ngenkathi kucatshangelwa ukushuba we Uhlaka;
• umngcele kwebhokisi izakhiwo ezahlukene kusukela sangaphambilini ukuthi uhlu umngcele kungaba ngokuphelele noma ingxenye abaphila iphethini;
• okuqukethwe kwebhokisi ukubeka isithombe pryavyazyvaya nokuqukethwe kwalo.

Uma ucacise amagugu amaningi, khona-ke iziphequluli kungaba asabela ngendlela yabo: Firefox ne-Opera azibonayo kuphela inketho kuqala.

Chasisa isizinda ukuphinda

Njengomthetho, uma isithombe sangemuva bucaciswe, kufanele liphindwe nendawo noma ngenhla. Ngenxa yalesi futhi wasebenzisa ngemfanelo isizinda ukuphinda. Ngakho, vimba ingemuva, CSS equkethe mhlaba ungaba omunye nemingcele eziningana:

• akukho ukuphinda - isithombe livela ekhasini e inguqulo eyodwa;
• ukuphinda - ingemuva iyaphindwa x kanye y;
• phinda-x - nendawo kuphela;
• phinda-y - thwi kuphela;
• isikhala - ingemuva iyaphindwa, kodwa uma isikhala akunakwenzeka ukugcwalisa phakathi izithombe angavela engenalutho;
• round - isithombe kukalwa, uma lungenayo ugcwalise yonke indawo izithombe lonke.

Isibonelo izimfanelo:

umzimba {ngemuva ukuphinda: no- uphinda phinda} - efanayo isizinda ukuphinda: phinda-y.

Ngo CSS3 kungenzeka ucacise amanani ahlanganisa izithombe eziningi lapho ebhala uhlu imingcele, ahlukaniswe ikhefana.

Chasisa ongemumva isiqeshana

Lesi sibaluli ichaza ukuziphatha ngemuva ngaphansi kwemingcele (isib esimweni amafulemu ezinamachashazi):

• ukupheda kwebhokisi - isizinda uboniswa emaqaqasini block;
• umngcele kwebhokisi - isithombe kuza ngaphansi kohlaka;
• okuqukethwe kwebhokisi - isithombe ngemuva kuzovela kuphela ngaphakathi okuqukethwe.

Isibonelo ukusetshenziswa:

umzimba {ngemuva-isiqeshana: content- ibhokisi;}.

Chrom futhi Safari zidinga Isiqalo -webkit-.

Izinga lokukhanya izimfanelo kanye lemifanekiso

opacity ngemfanelo ikuvumela ukusetha obala ngemuva - CSS impahla izosebenza kuzo zonke iziphequluli. Inani isethwe ku uhla kusuka 0.0 kuya 1.0 kukonke. Kulokhu, ungabeka obala ngemuva CSS ayibalulekile inamba esikhundleni 0.3 kwanele ukubhala .3:

.block {ngemuva-image:-url ( img.png); opacity: .3;}.

Ukuze usethe lokukhanya lengemuva, CSS kufanelekile ngisho IE ngezansi version lesishiyagalolunye, sebenzisa ngemfanelo lemifanekiso:

.block {ngemuva-image:-url ( img.png); isihlungi:-alpha (opacity = 30)}.

Kulokhu, ukubaluleka opacity isethwe kuka-0 no-100 Qaphela ukuthi opacity attribute izilungiselelo ezahlukene obala nge RGBA ifa: uma usebenzisa opacity kuyacaca hhayi kuphela ngemuva, kodwa futhi zonke izinto ngaphakathi kweyunithi.

Njalo ukuqapha izibalo zakho wokusetshenziswa CIS iziphequluli futhi kuwo wonke amanye amazwe. Inkinga enkulu yazo zonke DTP - izinguqulo ezindala ze-IE, ungavumeli ukuba usebenzise ngokwezinga CSS3 egcwele. Ngo isakhiwo ungakhohlwa ukusebenzisa amasevisi ekhethekile uhlole ukuthi isiphequluli sakho sisekela iyiphi impahla CSS. Uma ungakwazi ukufaka izinguqulo ezindala ze-iziphequluli, thola isevisi uzohlola umsebenzi indawo esipheqululini intanethi amaningi.