Trédhearcacht cúlra CSS. cúlra trédhearcach nó téacs le CSS

Le teacht na dearthóirí gréasáin CSS3 ag obair i go leor bealaí tar éis éirí níos éasca agus níos loighciúil: tar éis an tsaoil, is féidir leat anois shaincheapadh i ndáiríre solúbtha aon rud, chomh minic sin i muinín JavaScript. Ligean le rá ní mór duit dul i dtaithí ar an trédhearcacht an chúlra - cuireann CSS láithreach roghanna éagsúla.

Cúlra sainithe ag sraith de tréithe (cúlra-image, cúlra-phost , cúlra-mhéid, cúlra-athuair, cúlra-iatán, cúlra-tionscnaimh, cúlra-gearrthóg, cúlra-dath), is féidir le gach ceann acu a shannadh ar leithligh nó le chéile faoin tréith cúlra. Lig dúinn scrúdú a dhéanamh ar gach ceann acu go mion.

Tréith cúlra-dath

Go CSS, an dath cúlra a shocrú ar bhealaí éagsúla: ag baint úsáide as cód heicsidheachúlach, ainm dath nó RGB-iontráil. I CSS3 bhí sé indéanta a úsáid in ionad an rogha RGB-taifeadadh le RGBA.

Tá Heics cód datha a taifeadadh sa mhaoin tar éis an laitíse: cúlra-dath: # FFDAB9. Má tá na carachtair sa iontráil seo na péirí céanna, is é an cód ghnáth gearrtha beag: Is féidir le # ccff00 Is féidir a scríobh mar # cf0:

comhlacht {cúlra-dath: # cf0 ;}.

Is é an t-ainm, fiú amháin sna dathanna is coimhthíocha. Mar shampla, chomh maith leis an caighdeán dearg agus bán is féidir leat é a úsáid Navachóch (#FFDEAD) nó Honeydew2 (# E0EEE0):

comhlacht {cúlra-dath: corcra; }.

Is é an rogha deiridh RGB nó is féidir RGBA iontráil tú a shonrú, ní hamháin dath ach freisin an trédhearcacht an cúlra CSS, ach oibríonn an modh amháin i leaganacha IE níos sine ná 9. Aithníonn brabhsálaithe eile Leagan gnáth le trédhearcacht. Dar leis na caighdeáin W3C is fearr chun úsáid i gcónaí RGBA ionad an RGB níos gnáth.

An luach deiridh i RGBA cúlra agus leagann an teimhneacht ó 0 (trédhearcach) go 1 (teimhneach).

Tá roinnt luachanna neamhghnách. Is féidir leis an dath cúlra a shocrú ag baint úsáide as an t-HSL agus HSLA. Bhí an bheirt leanas le CSS3, agus dá bhrí sin ní á dtacú ag IE leagan 9 nó níos airde. Embodiments RGB comhionann nó RGBA, ach i bhfoirm eile: Lí (scáth - luach ar an roth dath, tugtha i gcéimeanna), sáitheán (saturation - déine dath mar chéatadán, ó 0 go 100), Gile (Gile - gile, arna thomhas mar an gcéanna Paraiméadar sáitheán ).

Tréith cúlra-image

An leagan is tras-bhrabhsálaí an cúlra trédhearcach - is é seo an úsáid a bhaint as an íomhá. Go CSS3, is féidir leat a leagtar íomhánna níos mó, tá sé seo déanta trí camóg. Mar shampla:

{Íomhá cúlra-chomhlacht: url (bg1.png), url (bg2.png)}.

Sa tslí seo tacaíocht a thabhairt fiú IE8. Roinnt íomhánna sa chúlra an rubair a úsáidtear sa leagan amach. Rud atá tábhachtach, ná déan dearmad a bhaint as aon íomhá agus a leagtar ar an dath cúlra i CSS, mar is féidir le húsáideoirí a uaslódáil ach an íomhá.

Tréith cúlra-phost

Má úsáideann tú an íomhá a shocrú ar an t-aonad cúlra, is féidir CSS leat chun seasamh ar an íomhá áit ar bith ar an scáileán. De réir réamhshocraithe, tá an íomhá suite sa chúinne uachtarach ar chlé. Bíonn Tréith ceachtar treoracha ó bhéal (barr, bun, ar chlé, ar dheis), a uimhriúla (ús, picteilín agus aonaid eile). Sa chás seo, ní mór duit dhá luach, cothrománacha agus ingearacha a shonrú:

comhlacht {cúlra-phost: lár ceart ;} - sa sampla seo, beidh an patrún a bheith suite ar an taobh deas den leathanach, an barr agus bun an t-achar íomhá go dtí an gcéanna.

Tréith cúlra-size

Uaireanta is gá chun stráice an cúlra CSS éid a laghdú. Chun seo a dhéanamh, bain úsáid as an tréith cúlra-mhéid, agus an méid de na cúlra is féidir a shocrú i pixel nó céatadáin, agus aon aonaid eile.

Leis an tréith, tá roinnt fadhbanna: le cur ar taispeáint i gceart chúlra sna leaganacha níos luaithe de na réimíreanna bhrabhsálaí atá le húsáid. Ar ndóigh, tacaíonn an leagan atá ann faoi láthair go hiomlán leis an tréith agus an gá atá le thréithe sonracha imithe.

Tréith cúlra-iatán

Sonraíonn an tréith iompar na n-íomhánna chúlra agus scrollaigh. Mar sin, ní mór dó bheith 3 luach (gan an hoidhreacht, an t-iomlán do gach ceann de na tréithe a pléadh san Airteagal seo):

• seasta - a dhéanann an pictiúr ar an cúlra seasta;
• scrollaigh - scrollaí cúlra leis an gcuid eile de na heilimintí;
• áitiúil - tá an íomhá ar chúlra scrolled má tá scrollaigh ábhar. Tá Cúlra a théann thar an t-ábhar ar an fhráma seasta.

Sampla úsáide:

comhlacht {cúlra-iatán seasta}.

Faoi láthair, ní Firefox tacú leis an maoin seo caite (áitiúil).

Tréith cúlra-tionscnaimh

Tá an tréith freagrach as an ngné suímh. a cheangal ar brabhsálaithe Luath-úsáidfear réimíreanna. Tá an maoin féin trí paraiméadair:

• Tá stuáil-bosca suite i gcoibhneas leis an patrún imeall, ach a choinneáil san áireamh an tiús an fhráma;
• airíonna teorann-bosca difriúil ó na roimhe sin sa gur féidir leis an líne teorann a bheith go hiomlán nó go páirteach forluí ar an phatrún;
• ábhar-bosca íomhá suite pryavyazyvaya a ábhar.

Má tá tú a shonrú luachanna il, ansin is féidir brabhsálaithe freagairt ar a mbealach féin: Firefox agus Opera bhrath ach an chéad rogha.

Tréith cúlra-athuair

De ghnáth, má tá an íomhá cúlra shonraithe, ní mór é a athdhéanamh cothrománach nó go hingearach. Mar sin agus a úsáidtear an tréith cúlra-athuair. Dá bhrí sin, cúlra bloc, is féidir CSS ina bhfuil a leithéid de mhaoin a bheith ar cheann de na paraiméadair éagsúla:

• no-athuair - an chuma ar an íomhá ar an leathanach i leagan amháin;
• arís - tá cúlra arís agus arís eile sa x agus y;
• arís-x - ach go cothrománach;
• arís-y - ach go hingearach;
• Spás - Tá cúlra arís agus arís eile, ach má tá an spás dodhéanta a líonadh isteach idir na pictiúir le feiceáil folamh;
• bhabhta - tá an íomhá de réir scála, más rud é nach ndéanann sé a líonadh an limistéar ar fad na pictiúir ar fad.

Sampla de na tréithe:

comhlacht {cúlra-athuair: aon- arís arís} - cosúil leis cúlra-athuair: athuair-y.

I CSS3 Is féidir luachanna do íomhánna comhadlann ar leith nuair bparaiméadar, scartha le camóga-innéacs ar.

Tréith cúlra-gearrthóg

Sainítear leis an tréith ar iompar an chúlra faoi na teorainneacha (m.sh., i gcás na frámaí poncaithe):

• stuáil-bosca - cúlra ar taispeáint laistigh den bhloc;
• teorann-bhosca - a thagann an íomhá faoin gcreat;
• ábhar-bhosca - beidh an pictiúr ar an cúlra le feiceáil ach amháin laistigh den ábhar.

Sampla úsáide:

comhlacht {cúlra-gearrthóg: ábhair, bosca;}.

Chrom agus Safari gá réimír -webkit-.

tréithe Teimhneacht agus scagaire

Ceadaíonn tréith teimhneacht leat a shocrú ar an trédhearcacht an chúlra - beidh CSS maoine ag obair i ngach brabhsálaí. Tá an luach atá leagtha síos sa raon 0.0-1.0 san áireamh. Sa chás seo, is féidir leat a leagtar ar an trédhearcacht an chúlra CSS aon luach slánuimhreach ionad 0.3 leor chun a scríobh 0.3:

.block {cúlra-image: url ( img.png); Teimhneacht: 0.3;}.

A shocrú ar an teimhneacht cúlra, tá CSS oiriúnach fiú do IE faoi bhun an leagan naoú, bain úsáid as an tréith scagaire:

.block {cúlra-image: url ( img.png); scagaire: alpha (teimhneacht = 30)}.

Sa chás seo, tá an luach teimhneacht atá leagtha idir 0 agus 100. Tabhair faoi deara go bhfuil tréith an teimhneacht suímh trédhearcacht éagsúla via RGBA oidhreacht: nuair a thiocfaidh ag baint úsáide as teimhneacht soiléir, ní hamháin ar an cúlra, ach freisin go léir na heilimintí taobh istigh den aonad.

I gcónaí monatóireacht a dhéanamh do staitisticí úsáide as brabhsálaithe CIS agus gach tír eile. An fhadhb is mó de na DTP - leaganacha níos sine de IE, ní dhéanann siad deis a thabhairt duit a bhaint as an méid CSS3 iomlán. Ní I leagan déan dearmad a bhaint as na seirbhísí speisialta a sheiceáil cibé an dtacaíonn do bhrabhsálaí aon mhaoin CSS. Mura féidir leat a shuiteáil leaganacha níos sine de brabhsálaithe, aimsiú seirbhís a seiceáil an obair láthair in brabhsálaithe il ar líne.