CSS follaiseachd cùl-raon. Cùl-fhiosrachadh no teacsa tro CSS

Le tighinn gu CSS3, tha obair dhealbhadairean cruth air a bhith nas sìmplidh agus nas so-ruigsinn ann an iomadh dòigh: às dèidh a h-uile càil, faodaidh tu a-nis gu sùbailte a bhith a 'rèiteachadh rud, nach eil cho tric a' cleachdadh JavaScript. Leigidh sinn gum feum thu follaiseachd cùl-raoin atharrachadh - tha CSS a 'tairgse grunn roghainnean.

Cùl-fhiosrachadh air a mhìneachadh le seata de buadhan (background-ìomhaigh a chùl-suidheachadh , cùl-raon-meud, chùl-ath-, chùl-ceanglachan, chùl-tùs, chùl-clip, chùl-dathach), gach aon de a dh'fhaodas a bhith air a shònrachadh air leth no còmhla fo sgèith na buadha Cùl-fhiosrachadh. Leigamaid anailis nas mionaidiche air gach aon dhiubh.

An t-adhbhar cùl-dath

Ann CSS, an cùl-dath urrainn a chur ann an grunn dhòighean: a 'cleachdadh còd hex, dath ainm no RGB-inntrigeadh. Ann an CSS3, dh 'fhàs e comasach an roghainn RGBA a chleachdadh an àite an clàr RGB.

Tha an còd dath sia-sheasmhach sgrìobhte san togalach às deidh a 'ghriod: cùl-dath: # FFDAB9. Ma tha na caractaran san aon inntrigeadh air am maidseadh ann an càraidean, mar as trice bidh an còd air a ghiorrachadh: # ccff00 Faodar a sgrìobhadh mar # cf0:

Body {background-color: # cf0;}.

Tha an t-ainm eadhon anns na flùraichean as iomallaiche. Mar eisimpleir, a bharrachd air an ìre dearg dearg is geal, faodaidh tu a chleachdadh NavajoWhite (#FFDEAD) no Honeydew2 (# E0EEE0):

Body {background-color: purple;}.

Leigidh an dreach mu dheireadh den chlàr RGB no RGBA dhut a bhith a 'comharrachadh chan e a-mhàin an dath, ach cuideachd follaiseachd cùl-raon CSS, ach tha an dòigh ag obair ann an IE a-mhàin thar dreach 9. Mar as trice bidh brabhsairean eile ag aithneachadh an roghainn le follaiseachd. Le ìrean W3C, tha e nas fheàrr RGBA a chleachdadh an àite an RGB nas àbhaistiche.

An luach mu dheireadh airson RGBA agus a 'suidheachadh cho dlùth ris a' chùl bho 0 (follaiseach) gu 1 (tearc).

Tha brìgh nas annasaiche ann. Faodar dath cùl-raoin a shuidheachadh le HSL agus HSLA. Chaidh an dà chuid a chur ri CSS3, agus mar sin chan eil taic aig IE gu h-ìosal fo tionndadh 9. Tha na roghainnean co-ionnan ri RGB no RGBA, ach ann an cruth eadar-dhealaichte: Hue (is e an luach a tha air a 'chuibhle dath, air a shuidheachadh ann an ceumannan), Sàmhach (is e an ìre sa cheud an dath, ann an àireamh sa cheud, bho 0 gu 100), Solas (is e soilleireachd an dath, air a thomhas san aon dòigh ris a' pharaitear Saturate ).

An gnè cùl-ìomhaigh

Is e an dreach as motha de luchd-brabhsair den chùl-raon fhollaiseach cleachdadh an ìomhaigh. Ann an CSS3, faodaidh tu eadhon beagan ìomhaighean a shònrachadh, thèid seo a dhèanamh tro choma. Eisimpleir:

{Chùl-ìomhaigh bodhaige: url (bg1.png), url (bg2.png)}.

Tha an dòigh seo a 'toirt taic eadhon IE8. Tha grunn ìomhaighean mar chùl-raon air an cleachdadh airson cur an sàs rubair. Is e am prìomh rud, na dì-chuimhnich, nuair a chleachdas tu ìomhaigh sam bith, cuideachd airson dath cùl-raoin a shuidheachadh ann an CSS, oir chan urrainn do luchd-cleachdaidh an ìomhaigh a thòiseachadh.

Tha an suidheachadh suidheachadh-cùil

Ma chleachdas tu dealbh gus cùl-fhiosrachadh a 'bhloc a chomharrachadh, leigidh CSS dhut an dealbh a shuidheachadh air àite sam bith air an sgrion. Gu bunaiteach, tha an ìomhaigh suidhichte anns an oisean gu h-àrd air an làimh chlì. Tha an rud a 'gabhail a-steach stiùireadh beòil (barr, bonn, clì, deas), no àireamhach (ceudadan, piogsail agus aonadan tomhais eile). Anns a 'chùis seo, feumaidh tu dà luachan a shònrachadh: gu cothromach agus gu h-ìseal:

corp {chùl-suidheachadh: ceart-ionad ;} - Anns an eisimpleir seo, tha am pàtran a bhios a bhith suidhichte air an taobh deas na duilleig, a 'mhullach agus aig a' bhonn an ìomhaigh ris an aon astar.

A 'ghnè meud-cùil

Uaireannan tha thu airson CSS a chleachdadh gus an cùl-raon a shìneadh no a mheud a lùghdachadh. Gus seo a dhèanamh, cleachd am meud cùl-taic, agus faodar meud a 'chùl a bhith air a shònrachadh ann am piogsail no ceudadan, agus ann an aonadan tomhais sam bith eile.

Leis a 'ghnè seo tha cuid de dhuilgheadasan: airson taisbeanadh ceart den chùl-raon anns na dreachan tràth de bhrabhsairean feumaidh e ro-leasachan a chleachdadh. Gu dearbh, tha na dreachan a th 'ann an-dràsta a' toirt làn taic don ghnè seo agus tha an fheum air togalaichean sònraichte air a dhol à bith.

An t-adhbhar cùl-ceangail

Tha an gnè seo a 'sònrachadh giùlan an ìomhaigh cùil nuair a bhios e a' gluasad. Mar sin, faodaidh e 3 luachan a ghabhail (gun a bhith a 'gabhail a-steach an oighreachd, a tha cumanta airson na buadhan a tha air an taisbeanadh san artaigil seo):

• stèidhichte - a 'dèanamh an dealbh air an cùl a shuidheachadh;
• sgrolaich - Scrolls chùl ris a 'chòrr de na h-eileamaidean;
• ionadail - an ìomhaigh air a chùlaibh Ghluais roilig ma tha susbaint. Tha cùl-fhiosrachadh a tha a 'dol seachad air na susbaint stèidhichte.

Eisimpleir de chleachdadh:

Buidheann {background-attachment fixed}.

An-dràsta, chan eil Firefox a 'toirt taic don t-seilbh mu dheireadh (ionadail).

An t-adhbhar bun-stèidh

Tha an t-adhbhar seo an urra ri bhith a 'suidheachadh an eileamaid. Feumaidh brabhsair de dh 'dreachan tràth a bhith a' cleachdadh ro-leasachan. Tha trì parantan air an togalach fhèin:

• padding-bogsa suidheachadh buntainneach air an iomall pàtran, agus a 'gabhail a-steach tiughad an cèis;
• crìoch-bogsa feartan eadar-dhealaichte bho roimhe ann an sin a 'chrìoch a dh'fhaodas a bhith gu tur no ann am pàirt tar-lùbadh a pàtran;
• -susbaint a-bogsa positioning ìomhaigh pryavyazyvaya an cuid susbaint.

Ma tha grunn luachan air an sònrachadh, faodaidh brabhsairean freagairt san dòigh aca fhèin: chan eil Firefox agus Opera a 'faicinn a' chiad roghainn a-mhàin.

A 'chùis-ath-aithris

Mar as trice, ma tha an cùl-raon air a shònrachadh leis an ìomhaigh, feumaidh e a bhith air a dhèanamh air ais gu cothromach no gu h-ìseal. Airson seo, thathar a 'cleachdadh a' chùl-ath-aithris. Mar sin, faodar cùl-raon de bhlàr a bhith aig cùl bloic aig a bheil CSS mar sin:

• cha-atharrais a dhèanamh - an dealbh a 'nochdadh air an duilleag ann an aon dreach;
• Dèan aithris a-rithist - tha an cùl-raon air a dhèanamh a-rithist air na h-aibhnean x agus y;
• rithist-x - a-mhàin a 'chòmhnard;
• rithist-y - dìreach a-mhàin;
• space - chùlaibh a-rithist, ach ma tha rùm-dhèanta a lìonadh eadar na dealbhan nochdadh falamh;
• timcheall - an dealbh a tha a shreap, ma chan eil e a 'lìonadh an sgìre air fad gu lèir dealbhan.

Eisimpleir de rud a chleachdadh:

corp {chùl-ath-: no- atharrais a dhèanamh air ath-} - coltach chùl-ath-:-y-rithist.

Ann an CSS3, tha e comasach luachan a shònrachadh airson grunn ìomhaighean, ma tha thu a 'clàradh pharaimearan le cromag.

An gnè cùl-gearra

Tha an t-adhbhar seo a 'mìneachadh cùl-fhiosrachadh fo na crìochan (mar eisimpleir, ann an cùis frèaman dotagach):

• padding-bogsa - chùl a thaisbeanadh ann an taobh a-staigh an togalaich;
• crìoch-bhogsa - an dealbh a 'tighinn fo fhrèam-obrach;
• -susbaint a-bhogsa - an dealbh air a 'chùl ach' nochdadh taobh a-staigh na th 'air.

Eisimpleir de chleachdadh:

Body {background-clip: content-box;}.

Feumaidh Chrom agus Safari an ro-leas -webkit- a chleachdadh.

Feartan crùbachd is criathra

Tha an t-adhbhar dìomhaireachd a 'leigeil leat dhut follaiseachd a' chùl-raon a shuidheachadh - obraichidh seilbh CSS anns gach brabhsair. Tha an luach air a shuidheachadh bho 0.0 gu 1.0 a-steach. Ann a bhith a 'dèanamh seo, faodaidh tu sealladh follaiseach CSS a shuidheachadh Às aonais luach sìor-fhillte: an àite 0.3, bidh e math a sgrìobhadh .3:

.block {background-image: url (img.png); Dòchasachd: .3;}.

Gus follaiseachd a 'chùl-raon a shuidheachadh, tha an CSS freagarrach airson eadhon airson IE fon naoidheamh dreach, cleachd an roghainn sgàilean:

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

Anns a 'chùis seo, tha an luach dìomhaireachd air a shuidheachadh bho 0 gu 100. Thoir fa-near gu bheil an t-adhbhar dìomhaireachd eadar-dhealaichte bhon t-suidheachadh follaiseachd le oighreachd RGBA: nuair a bhios tu a' cleachdadh mì-chinnt, chan e a-mhàin gu bheil an cùl-raon follaiseach, ach tha gach eileamaid taobh a-staigh a 'bhloca cuideachd follaiseach.

Lean an staitistig mu chleachdadh brabhsairean anns an CIS agus anns na dùthchannan eile. Is e an duilgheadas as motha airson luchd-cruthachaidh a 'chruth an seann dreach de IE, chan eil iad a' toirt cead dhut CSS3 a chleachdadh chun na h-ìre as àirde. Nuair a bhios tu a 'dealbhadh, na dì-chuimhnich seirbheisean sònraichte a chleachdadh a nì cinnteach ma tha do bhrobhsair a' toirt taic do sheilbh CSS sam bith. Mura h-urrainn dhut stàladh nas sine de bhrabhsairean a stàladh, lorg seirbheis a dhearbhaicheas obair an làraich ann an diofar bhrabhsairean air-loidhne.