CSS fono travidebleco. Travidebla fono aŭ teksto kun CSS

Kun la alveno de CSS3 retejo diseñadores labori multmaniere fariĝis pli facila kaj pli logika: finfine, vi povas nun vere flekse agordi ajna celo, malpli ofte recurrir al JavaScript. Imagu ke vi bezonas ĝustigi la travidebleco de la fono - CSS tuj proponas plurajn eblojn.

Fono difinita per aro de atributoj (fono-bildo, fono-pozicio , fono-grandeco, fono-ripetu, fono-alligiteco, fono-deveno, fono-klipo, fono-koloro), ĉiu el kiu povas esti asignita aparte aŭ kombinita sub la eco fono. Ni rigardu ĉiun el ili detale.

Atribui fono-koloro

En CSS, la fonkoloro povas esti aro en pluraj manieroj: uzante deksesuma kodo, koloro nomon aŭ RGB-eniro. En CSS3 ĝi fariĝis ebla por uzi anstataŭ RGB-registradon opcio kun RGBA.

Hex koloro kodo estas registrita en la posedaĵo post la krado: fono-koloro: # FFDAB9. Se la karakteroj en ĉi tiu eniro estas samaj paroj, la kodo estas kutime iomete tranĉita: # ccff00 povas esti skribita kiel # cf0:

korpo {fono-koloro: # cf0 ;}.

La nomo estas, eĉ en la plej ekzotaj koloroj. Ekzemple, aldone al la norma ruĝa kaj blanka vi povas uzi NavajoWhite (#FFDEAD) aŭ Honeydew2 (# E0EEE0):

korpo {fono-koloro: purpura robo }.

Tiu lasta opcio estas RGB aŭ RGBA eniro permesas vin specifi ne nur koloro sed ankaŭ la travidebleco de la CSS fono, sed la metodo funkcias nur en IE versioj pli malnovaj ol 9. Aliaj retumiloj rekoni normala versio kun travidebleco. Laŭ la W3C normoj estas preferinde uzi ankoraŭ RGBA anstataŭ la pli kutima RGB.

La lasta valoro en RGBA fono kaj fiksas la opakecon de 0 (travidebla) al 1 (opaka).

Estas iuj nekutimaj valorojn. La fonkoloro povas agordi uzante la HSL kaj HSLA. Ambaŭ estis aldonitaj al CSS3, kaj tial ne estas subtenata de IE versio 9 aŭ pli alta. Enkorpiĝoj identa RGB aŭ RGBA, nur en malsama formato: Hue (ombro - valoro sur la koloro rado, estas donita en gradoj), saturi (saturación - koloro intenseco kiel procento, de 0 al 100), Lightness (malpezeco - brilo, mezurita simile parametro saturi ).

Atribui fono-bildo

La plej transversa retumilo versio de la travidebla fono - tio estas la uzo de la bildo. En CSS3, vi povas agordi eĉ pli bildoj, ĉi tiu estas farita tra komo. ekzemple:

{Fono-korpo bildo: url (bg1.png), url (bg2.png)}.

Tiu metodo por subteni eĉ IE8. Pluraj bildoj en la fono de la kaŭĉuko uzita en la aranĝon. Grave, ne forgesu uzi ajnan bildon kaj agordi la fonan koloron en CSS, kiel uzantoj povas simple alŝuti bildon.

Atribui fono-pozicio

Se vi uzas la bildon por agordi la fonon unuo, CSS permesas posicionar la bildon ie ajn en la ekrano. Defaŭlte, la bildo situas en la supra maldekstra angulo. Atributo prenas aŭ parolaj instrukcioj (supre, sube, maldekstra, dekstra), nombra (intereso, pikseloj kaj aliaj unuoj). En ĉi tiu kazo, vi devas specifi du valoroj, horizontala kaj vertikala:

korpo {fono-pozicio: dekstra centro ;} - en ĉi tiu ekzemplo, la modelo estos lokita sur la dekstra flanko de la paĝo, supre kaj sube de la bildo distanco al la sama.

Atribui fono-grandeco

Kelkfoje necesas tiri la CSS fono aŭ redukti lian grandecon. Por fari tion, uzu la eco fono-grandeco, kaj la grandeco de la fono povas esti aro en pikseloj aŭ procentoj, kaj ajnaj aliaj unuecoj.

Kun ĉi eco, estas iuj problemoj ĉar korekta montriĝo de fono en la pli fruaj versioj de la retumilo prefiksoj por esti uzita. Kompreneble, la nuna versio plene subtenas tiun eco kaj la neceso de specifaj ecoj malaperis.

Atribui fono-alligiteco

Tiu eco specifas la konduto de la fono bildoj dum rulado. Do, ĝi povas preni 3 valoroj (ne inkluzive de la heredas, la tuta de ĉiuj el la atributoj diskutita en ĉi tiu artikolo):

• fiksa - faras la bildo sur la fono de fiksita;
• rulumi - fono rulaĵoj kun la resto de la elementoj;
• lokaj - la bildon sur fono estas scrolled se movo havas enhavon. Fono kiu iras preter la enhavo de la kadro estas fiksa.

Ekzemplo de uzo:

korpo {fono-alligiteco fiksita}.

Nuntempe, Firefox ne subtenas la lasta propraĵo (loka).

Atribui fono-origino

Tiu eco respondecas pri la investon elemento. Frua retumiloj postulas la uzon de prefiksoj. La propraĵo mem havas tri parametrojn:

• Plenigado-skatolo posiciona relativa al la rando desegnon, dum konsiderante la dikeco de la kadro;
• limo-skatolo ecoj malsamaj de la antaŭaj en tiu limo linio povas esti tute aŭ parte koincidas la mastro;
• enhavo-skatolon situado bildo pryavyazyvaya ĝia enhavo.

Se vi donas plurajn valorojn, do retumiloj povas reagi en sia propra maniero: Firefox kaj Opera perceptas nur la unua elekto.

Atribui fono-ripetu

Kutime, se la fono bildo estas markita, ĝi devas esti ripetita horizontale aŭ vertikale. Pro tio kaj uzis la atributo fono-ripetu. Tiel, bloko fono, CSS kiu enhavas tia propraĵo povas havi unu el pluraj parametroj:

• neniu ripeto - la bildo aperas sur paĝo en sola versio;
• ripeti - fono ripetas en la x kaj y;
• ripeti-x - nur horizontale;
• ripeti-y - nur vertikale;
• spaco - fono estas ripetata, sed se la spaco estas neeble plenigi inter la bildoj aperas malplena;
• ronda - la bildo estas grimpitaj, se ĝi ne plenigas la tutan areon de tutaj bildoj.

Ekzemplo de la atributoj:

korpo {fono-ripetu: ne- ripeto ripeto} - simila fono-ripetu: ripeti-y.

En CSS3 povas specifi valoroj por multnombraj bildoj kiam printi parametroj, apartigitaj per komoj.

Atribui fono-klipo

Tiu eco difinas la konduto de la fono sub la limoj (ekz, en la kazo de la punktita kadrojn):

• Plenigado-skatolo - fono montrata en la interno de la bloko;
• limo-skatolo - la bildo venas sub la kadro;
• enhavo-skatolon - la bildo en la fono nur aperos ene de la enhavo.

Ekzemplo de uzo:

korpo {fono-klipo: Content- skatolo;}.

Chrom kaj Safari postulas -webkit- prefikso.

Opakeco atributoj kaj filtrilo

opakeco eco permesas agordi la travidebleco de la fono - CSS proprieto funkcios en ĉiuj retumiloj. La valoro estas metita en la intervalo de 0.0 al 1.0 inkluziva. En ĉi tiu kazo, vi povas agordi la travidebleco de la CSS fono ne entjera valoro anstataŭ 0.3 sufiĉas skribi .3:

.block {fono-bildo: url ( img.png); opakeco: .3;}.

Por agordi la fono opakeco, CSS taŭgas eĉ por IE sub la naŭa versio, uzu la filtrilo eco:

.block {fono-bildo: url ( img.png); filtrilo: alfa (opakeco = 30)}.

En ĉi tiu kazo, la opakeco valoro estas metita inter 0 kaj 100. Noto ke la opakecon atribui malsamajn travidebleco agordojn per RGBA heredaĵo: uzinte opakeco evidentiĝas ne nur la fono, sed ankaŭ ĉiuj elementoj ene de la unuo.

Ĉiam kontroli viajn uzado statistikoj por CEI retumiloj kaj ĉiuj aliaj landoj. La plej granda problemo de ĉiuj DTP - pli malnovaj versioj de IE, ili ne permesas vin uzi la plenan amplekson CSS3. En aranĝo ne forgesu uzi la specialaj servoj, kiuj kontrolas ĉu via foliumilo subtenas ajnan CSS proprieto. Se vi ne povas instali pli malnovaj versioj de retumiloj, trovi servon kiu kontrolos la retejo laboron en pluraj retumiloj rete.