CSS mārama papamuri. papamuri Puata kuputuhi ranei ki CSS

Ki te taeraa mai o te CSS3 kaihoahoa tukutuku mahi i roto i ngā huarahi maha hei kua māmā me te ake arorau: i muri katoa, ka taea e koe inaianei tino ngāwari whakarite tetahi ahanoa, iti pinepine hanga ki he JavaScript. Kia mea a e hiahia ana koe ki te whakatika i te mārama o te papamuri - CSS tonu tuku maha kōwhiringa.

He whakamārama tautuhia e te huinga o huanga (papamuri-image, papamuri-tūranga , whakamārama-rahi, whakamārama-tukurua, whakamārama-āpitihanga, whakamārama-take, whakamārama-topenga, muri-tae), ia o e taea te whakaritea motuhake ranei ngā raro i te huanga papamuri. Kia titiro tatou ia o ratou i roto i ngā kōrero.

Huanga papamuri-tae

I roto i CSS, te tae papamuri taea te whakaturia i roto i te maha ngā huarahi: te whakamahi i te waehere hex, ingoa tae RGB-urunga ranei. I roto i te CSS3 ka taea ki te whakamahi hei utu o te kōwhiringa RGB-tuhi ki RGBA.

tuhia waehere tae Hex te i roto i te taonga i muri i te wini whakakahokaho: papamuri-tae: # FFDAB9. Ki te ko te pūāhua i roto i tenei urunga te taua takirua, ko te nuinga o te waehere he tapahia iti: e taea te tuhituhi # ccff00 rite cf0 #:

tinana {papamuri-tae: # cf0 ;}.

Ko te ingoa, ara i roto i nga tae tino tāwāhi. Hei tauira, i roto i te tua ki te paerewa whero me te ma ka taea e koe te whakamahi i NavajoWhite (#FFDEAD) ranei Honeydew2 (# E0EEE0):

tinana {papamuri-tae: papura; }.

Ko te kōwhiringa whakamutunga ko RGB ranei RGBA tāurunga taea ki a koe te whakapūtā tae kore anake, engari ano hoki i te mārama o te papamuri CSS, engari mahi te tikanga anake i roto i putanga IE pakeke atu i te 9. mōhio ana Ētahi atu pūtirotiro putanga noa ki mārama. E ai ki te paerewa W3C ko reira pai ki te whakamahi i RGBA tonu hei utu o te RGB mua ake.

Te uara whakamutunga i roto i RGBA papamuri me whakatakoto ana te Āheiō i 0 (mārama) ki 1 (puatakore).

He etahi uara rerekē. Ka taea te whakaturia te tae papamuri te whakamahi i te HSL me HSLA. Rua i honoa mai ki a CSS3, a kahore e reira tautokona e IE putanga 9 teitei ranei. Taatou ōrite RGB ranei RGBA, anake i roto i te hōputu rerekē: Hue (whakamarumaru - uara i runga i te wira tae, kua hoatu i roto i te nekehanga), te faaо (waiwai - kaha te tae rite te ōrau, i 0 ki te 100), Mārama (otinga - wherikotanga, whanganga tatau Tawhā te faaо ).

Huanga papamuri-image

Ko te putanga ripeka-pūtirotiro te nuinga o te muri mārama - ko te whakamahi o te whakapakoko tenei. I roto i te CSS3, ka taea e koe whakaturia atu ara whakapakoko, meatia tenei e i roto i te piko. tauira:

{Image papamuri-tinana: url (bg1.png), url (bg2.png)}.

Tenei ara o tautoko noa IE8. He maha ngā whakaahua i roto i te papamuri o te rapa whakamahia i roto i te tahora. Nui, e kore e wareware ki te whakamahi i tetahi whakapakoko, me te whakaturia te tae papamuri i roto i CSS, rite taea ngā kaiwhakamahi te tukuake noa te whakapakoko.

Huanga papamuri-tūnga

Ki te whakamahi koe i te whakapakoko ki te whakaturia te wae papamuri, taea CSS ki a koutou tūnga i te whakapakoko ki hea i runga i te mata. Na roto i te taunoa, kei te whakapakoko i roto i te kokonga maui o runga. Huanga e rānei tohutohu kōrero (runga, raro, mahue, tika), he tau (moni, pika, me ētahi atu wae). I roto i tenei take, me whakapūtā koutou e rua ngā uara, whakapae, me te poutū:

tinana {papamuri-tūranga: pokapū tika ;} - i roto i tenei tauira, ka te tauira e kei i te taha ki matau o te whārangi, te tihi me te raro o te whakapakoko tawhiti ki te taua.

Huanga papamuri-rahi

I te tahi taime te mea e tika ana ki te totoro te papamuri CSS ranei whakaiti i tona rahi. Ki te mahi i tenei, te whakamahi i te huanga papamuri-rahi, me te rahi o te papamuri taea te whakaturia i roto i pika ōrau ranei, me tetahi atu wae.

Ki tenei huanga, i reira e etahi raruraru: hoki ki te whakamahi whakaatu tika o te whakamārama i roto i te putanga mua o te kuhimua pūtirotiro. O te akoranga, tautoko tino te putanga o nāianei tenei huanga ka ngaro te hiahia mō ngā āhuatanga motuhake.

Huanga papamuri-āpitihanga

Tenei huanga āta te whanonga o te whakapakoko muri i panuku. Na, e taea te tango i reira 3 uara (kore tae atu i te riro i, te tapeke mo katoa o nga huru kōrero i roto i tēnei tuhinga):

• pūmau - hanga i te pikitia i runga i te papamuri o whakaritea;
• panuku - Panuku papamuri ki te toenga o te huānga;
• rohe - panuku te whakapakoko i runga i te papamuri te ki he ihirangi panuku. whakaritea whakamārama e haere ki tua atu i te tirotiro o te anga te.

Tauira o te whakamahi:

tinana {papamuri-āpitihanga whakaritea}.

I tēnei wā, e kore e Firefox tautoko te taonga whakamutunga (rohe).

Huanga papamuri-takenga

Tenei huanga Ko haepapa mo te huānga tūnga. rapu pūtirotiro wawe te whakamahi o ngā kuhimua. Ko te taonga ano kua toru tawhā:

• tūnga purpuru-pouaka e whanaunga ki te tauira mata, i tango ki pūkete te matotoru o te anga;
• āhuatanga rerekē i te mua i roto i taua taea te raina rohe hei rohe-pouaka rawa wāhanga ranei īnaki te tauira;
• tūnga ihirangi-pouaka image pryavyazyvaya tona ihirangi.

Ki te whakapūtā koe uara maha, ka pūtirotiro taea huru i roto i to ratou ake ara: Firefox ko Opera kite anake te kōwhiringa tuatahi.

Huanga papamuri-tukurua

Ka rite ki te tikanga, ki te tohua te whakapakoko papamuri te, me te faahiti i te reira whakapae poutū ranei. Hoki tenei a whakamahia te huanga papamuri-tukurua. Ko te kupu, poraka whakamārama, CSS nei kei te taonga taua taea whai tetahi o te maha tawhā:

• kahore-tukurua - te whakapakoko puta i runga i te whārangi i roto i te putanga kotahi;
• faahiti - korerotia whakamārama e i roto i te x me te y;
• faahiti-x - whakapae anake;
• faahiti-y - poutū anake;
• Kei te korerotia whakamārama, engari ki te he e taea wāhi ki te whakaki i roto i waenganui i te pikitia kau puta - wāhi;
• Kei te Whakaitia te whakapakoko, ki te kore e whakakiia reira te wāhi katoa o te pikitia katoa - a tawhio noa.

Tauira o te huanga:

tinana {papamuri-tukurua: no- tukurua tukurua} - rite papamuri-tukurua: faahiti-y.

I roto i te CSS3 kia whakapūtā uara mō whakapakoko maha ka rārangi tawhā, wehea e ngā piko.

Huanga papamuri-topenga

Tenei huanga tautuhi ana te whanonga o te papamuri i raro i nga rohe (hei tauira, i roto i te take o te papa iraira):

• purpuru-pouaka - papamuri whakaaturia i roto i te roto o te poraka;
• rohe-pouaka - mai te whakapakoko i raro i te anga;
• ihirangi-pouaka - te pikitia i runga i te papamuri ka puta anake i roto i te ihirangi.

Tauira o te whakamahi:

tinana {papamuri-topenga: content- pouaka;}.

Chrom ko Safari rapu kuhimua -webkit-.

huanga Āheiō me te tātari

Āheiō huanga taea ki a koe whakaturia te mārama o te papamuri - ka mahi rawa CSS i roto i pūtirotiro katoa. Kei te whakaturia te uara i roto i te whānui i 0.0 ki te 1.0 urutomo. I roto i tenei take, ka taea e koe whakaturia te mārama o te papamuri CSS kahore uara tōpū hei utu o 0.3 He nui ki te tuhituhi .3:

.block {papamuri-image: url ( img.png); Āheiō: .3;}.

Hei whakaturia te Āheiō papamuri, he pai noa hoki IE raro te putanga iwa CSS, te whakamahi i te huanga tātari:

.block {papamuri-image: url ( img.png); tātari: Arepa (Āheiō = 30)}.

I roto i tenei take, whakaturia te uara Āheiō te i waenganui i te 0 me te 100. Note e ahua te Āheiō tautuhinga mārama rerekē mā RGBA kainga: ka whakamahi i Āheiō riro kore mārama anake te papamuri, engari ano hoki nga mea timatanga katoa i roto i te kōwae.

aroturuki tonu koutou tatauranga whakamahinga mō pūtirotiro CIS me ētahi atu whenua katoa. Ko te raruraru nui o DTP katoa - putanga tawhito o IE, e kore ratou e tukua ki a koutou te whakamahi i te CSS3 whānuitanga tonu. I roto i te tahora e kore e wareware ki te whakamahi i te ratonga motuhake e tirohia mēnā tautoko tō pūtirotiro tetahi taonga CSS. Ki te kore koe e taea e te tāuta putanga tawhito o ngā pūtirotiro, kitea te mahi e ka tirohia i te mahi pae i roto i pūtirotiro maha online.