CSS tryloywder cefndir. cefndir tryloyw neu destun â CSS

Gyda dyfodiad y dylunwyr gwe CSS3 yn gweithio mewn nifer o ffyrdd wedi dod yn haws ac yn fwy rhesymegol: wedi'r cyfan, gallwch nawr yn wir hyblyg addasu unrhyw wrthrych, yn llai aml droi at JavaScript. Lets 'ddeud angen i chi addasu tryloywder y cefndir - CSS ar unwaith yn cynnig nifer o opsiynau.

Cefndir a ddiffinnir gan set o briodoleddau (cefndir-ddelwedd, cefndir-sefyllfa , cefndir-maint, cefndir-dro ar ôl tro, cefndir-ymlyniad, cefndir-tarddiad, cefndir-clip, cefndir-lliw), pob un y gellir eu neilltuo ar wahân neu wedi'u cyfuno o dan y priodoledd cefndir. Gadewch i ni edrych ar bob un ohonynt yn fanwl.

Priodoli cefndir-lliw

Yn CSS, y lliw cefndir y gellir eu gosod mewn sawl ffordd: drwy ddefnyddio cod hecs, enw'r lliw neu RGB-mynediad. Yn CSS3 daeth yn bosibl defnyddio yn lle opsiwn RGB-recordio gyda RGBA.

cod lliw Hex yn cael ei gofnodi yn yr eiddo ar ôl y dellt: cefndir-lliw: # FFDAB9. Os bydd y cymeriadau yn y cofnod hwn yr un fath parau, mae'r cod fel arfer ychydig doriad: Gall # ccff00 cael ei ysgrifennu fel # cf0:

corff {cefndir-lliw: # cf0 ;}.

Mae'r enw yn, hyd yn oed yn y lliwiau mwyaf egsotig. Er enghraifft, yn ychwanegol at y safon coch a gwyn gallwch ddefnyddio NavajoWhite (#FFDEAD) neu Honeydew2 (# E0EEE0):

corff {cefndir-lliw: porffor; }.

Y dewis olaf yn RGB neu fynediad RGBA caniatáu i chi bennu nid yn unig yn lliw ond hefyd y tryloywder y cefndir CSS, ond mae'r dull yn gweithio yn unig mewn fersiynau IE hŷn na 9. porwyr eraill yn cydnabod fersiwn arferol gyda thryloywder. Yn ôl y safonau W3C, mae'n well defnyddio yn dal RGBA lle'r RGB mwy arferol.

Mae gwerth olaf yn y cefndir RGBA ac yn gosod y anhryloywder o 0 (tryloyw) i 1 (afloyw).

Mae yna rai werthoedd anarferol. Gall y lliw cefndir yn cael ei osod gan ddefnyddio'r HSL a HSLA. Cafodd y ddau eu hychwanegu at CSS3, ac felly nid ydynt wedi'u cefnogi gan fersiwn IE 9 neu uwch. Embodiments RGB union yr un fath neu RGBA, dim ond mewn fformat gwahanol: Hue (cysgod - gwerth ar yr olwyn lliw, yn cael ei roi mewn graddau), saturate (dirlawnder - arddwysedd lliw fel canran, 0-100), Lightness (ysgafnder - disgleirdeb, a fesurir yn yr un modd paramedr saturate ).

Priodoli cefndir-ddelwedd

Mae'r fersiwn traws-porwr rhan fwyaf o'r cefndir dryloyw - mae hyn yn y defnydd o'r ddelwedd. Yn CSS3, gallwch osod hyd yn oed mwy delweddau, gwneir hyn drwy atalnod. enghraifft:

{Delwedd cefndir-corff: url (bg1.png), url (bg2.png)}.

Mae hyn yn ffordd o gefnogi hyd yn oed IE8. Mae nifer o ddelweddau yn y cefndir y rwber a ddefnyddir yn y cynllun. Yn bwysig, peidiwch ag anghofio i ddefnyddio unrhyw ddelwedd a gosod y lliw cefndir yn y CSS, gan y gall defnyddwyr yn syml llwytho delwedd.

Priodoli cefndir-safle

Os ydych yn defnyddio y llun i osod uned cefndir, CSS yn eich galluogi i osod y ddelwedd yn unrhyw le ar y sgrin. Yn ddiofyn, mae'r ddelwedd yn cael ei leoli yn y gornel chwith uchaf. Priodoledd yn cymryd naill ai cyfarwyddiadau llafar (top, gwaelod, chwith, dde), a rhifiadol (llog, picsel ac unedau eraill). Yn yr achos hwn, mae'n rhaid i chi nodi dau werth, llorweddol a fertigol:

corff {cefndir-safle: canolfan gywir ;} - yn yr enghraifft hon, bydd y patrwm yn cael ei lleoli ar yr ochr dde o'r dudalen, top a gwaelod y pellter ddelwedd i'r un.

Priodoli cefndir-maint

Weithiau mae angen i ymestyn y cefndir CSS neu leihau ei faint. I wneud hyn, defnyddiwch y priodoledd cefndir-maint, a maint y cefndir gellir eu gosod mewn picseli neu ganrannau, ac unrhyw unedau eraill.

Gyda briodoledd hon, mae rhai problemau: i'w arddangos yn gywir o gefndir yn y fersiynau cynharach o'r rhagddodiaid porwr i gael ei ddefnyddio. Wrth gwrs, y fersiwn cyfredol yn llwyr gefnogi'r priodoledd hwn a'r angen am eiddo penodol diflannu.

Priodoli cefndir-atodiad

Mae hyn yn nodwedd yn pennu ymddygiad y delweddau cefndir tra'n sgrolio. Felly, gall gymryd 3 gwerth (heb gynnwys y etifeddu, y cyfanswm ar gyfer pob un o'r nodweddion a drafodir yn yr erthygl hon):

• sefydlog - yn gwneud y llun ar gefndir sefydlog;
• sgrolio - sgroliau cefndir gyda gweddill yr elfennau;
• lleol - y ddelwedd ar gefndir ei sgrolio os oes sgrolio wedi cynnwys. Cefndir sy'n mynd y tu hwnt cynnwys y ffrâm yn sefydlog.

Enghraifft o ddefnydd:

corff {cefndir-atodiad sefydlog}.

Ar hyn o bryd, Nid yw Firefox yn cefnogi'r eiddo diwethaf (lleol).

Priodoli cefndir-tarddiad

Mae'r priodoledd yn gyfrifol am yr elfen lleoli. borwyr cynnar angen defnyddio rhagddodiaid. Mae gan yr eiddo ei hun tri paramedr:

• padin-bocs wedi'i leoli gymharu â'r patrwm ymyl, tra'n cymryd i ystyriaeth y trwch y ffrâm;
• eiddo y ffin-bocs wahanol i'r blaenorol yn y gall y llinell derfyn yn gwbl neu'n rhannol gorgyffwrdd patrwm;
• cynnwys blwch image lleoli pryavyazyvaya ei gynnwys.

Os eich bod yn nodi gwerthoedd lluosog, yna gall porwyr ymateb yn eu ffordd eu hunain: Firefox a Opera gweld dim ond y dewis cyntaf.

Priodoli cefndir-dro ar ôl tro

Fel rheol, os bydd y ddelwedd cefndir ei nodi, mae'n rhaid eu hailadrodd yn llorweddol neu'n fertigol. Ar gyfer hyn a defnyddio'r priodoledd cefndir-dro ar ôl tro. Felly, cefndir bloc, gall CSS sy'n cynnwys eiddo o'r fath yn cael un o nifer o baramedrau:

• dim-dro ar ôl tro - y ddelwedd yn ymddangos ar dudalen mewn un fersiwn;
• ailadrodd - cefndir yn cael ei ailadrodd yn y x ac y;
• ailadrodd-x - dim ond yn llorweddol;
• ailadrodd-y - dim ond yn fertigol;
• gofod - cefndir yn cael ei ailadrodd, ond os oes lle yn amhosibl i lenwi rhwng y lluniau yn ymddangos yn wag;
• crwn - y ddelwedd ei raddio, os nad yw'n llenwi yr ardal gyfan o luniau cyfan.

Enghraifft o nodweddion:

corff {cefndir-dro ar ôl tro: dim- ailadrodd ailadrodd} - yn debyg cefndir-dro ar ôl tro: ailadrodd-y.

Yn CSS3 bennu gwerthoedd ar gyfer delweddau lluosog wrth restru paramedrau, wedi'u gwahanu gan atalnodau.

Priodoli cefndir-clip

Mae hyn yn nodwedd yn diffinio ymddygiad y cefndir o dan y ffiniau (e.e. yn achos y fframiau doredig):

• padin-bocs - cefndir harddangos yn y tu mewn i'r bloc;
• border-bocs - y ddelwedd yn dod o dan y fframwaith;
• content-bocs - bydd y llun ar y cefndir yn unig yn ymddangos o fewn y cynnwys.

Enghraifft o ddefnydd:

corff {cefndir-clip: content- blwch;}.

Chrom a Safari yn gofyn rhagddodiad -webkit-.

priodoleddau didreiddedd a hidlo

priodoledd didreiddedd caniatáu i chi osod tryloywder y cefndir - Bydd eiddo CSS yn gweithio ym mhob porwyr. Mae'r gwerth a bennwyd yn yr ystod 0.0-1.0 gynhwysol. Yn yr achos hwn, gallwch osod tryloywder y cefndir CSS unrhyw werth cyfanrif yn hytrach na 0.3 yn ddigon i ysgrifennu .3:

.block {cefndir-image: url ( img.png); didreiddedd: 0.3;}.

I osod y didreiddedd cefndir, CSS yn addas hyd yn oed ar gyfer IE islaw'r nawfed fersiwn, defnyddiwch y priodoledd hidlo:

.block {cefndir-image: url ( img.png); hidlo: alffa (didreiddedd = 30)}.

Yn yr achos hwn, mae'r gwerth didreiddedd ei osod rhwng 0 a 100. Noder bod y didreiddedd priodoli gosodiadau tryloywder gwahanol trwy RGBA etifeddiaeth: wrth ddefnyddio didreiddedd dod yn amlwg nid yn unig yn y cefndir, ond hefyd yr holl elfennau y tu mewn i'r uned.

fonitro eich ystadegau defnydd ar gyfer porwyr CIS a holl wledydd eraill bob amser. Y broblem fwyaf oll DTP - fersiynau hŷn o IE, nid ydynt yn caniatáu i chi ddefnyddio'r CSS3 graddau llawn. Mewn cynllun peidiwch ag anghofio i ddefnyddio'r gwasanaethau arbennig sy'n gwirio a yw eich porwr yn cefnogi unrhyw eiddo CSS. Os nad ydych yn gallu gosod fersiynau hŷn o borwyr, dod o hyd i wasanaeth a fydd yn edrych ar y gwaith ar y safle mewn porwyr lluosog ar-lein.