CSS bakgrunnur gagnsæi. Gagnsæ bakgrunnur eða texta með CSS

Með tilkomu CSS3 vefur hönnuður vinnur á margan hátt hefur orðið auðveldara og meira rökrétt: eftir allt, getur þú nú virkilega á sveigjanlegan aðlaga hvaða hlut, sjaldnar gripið til JavaScript. Við skulum segja að þú þarft að stilla gagnsæi bakgrunni - CSS býður strax nokkra möguleika.

Bakgrunnur afmarkað með af eiginleika (Bakgrunnur-mynd, background-stöðu , background-stærð, bakgrunnur-endurtekningar, background-attachment, background-uppruna, background-bút, background-litur), sem hver um sig getur verið úthlutað fyrir sig eða saman undir sterkt eiginleikanum bakgrunnur. Við skulum skoða hvert þeirra í smáatriðum.

Eigindi bakgrunnslit-lit

Í CSS, bakgrunnslit er hægt að stilla á ýmsa vegu: með álög kóða, lit nafni eða RGB-færslu. Í CSS3 það varð mögulegt að nota í staðinn fyrir RGB-hljóðritun valkostur við RGBA.

Hex lit kóða er skráð í eign eftir grindurnar: background-color: # FFDAB9. Ef stafir í þessari færslu eru sömu pör, kóðinn er yfirleitt lítið skera: # ccff00 Hægt er að skrifa eins og # cf0:

líkama {background-color: # cf0 ;}.

Nafnið er, jafnvel í flestum framandi litum. Til dæmis, í viðbót við stöðluðu rautt og hvítt er hægt að nota NavajoWhite (#FFDEAD) eða Honeydew2 (# E0EEE0):

líkama {background-litur: fjólublátt; }.

Síðarnefndu valkostur er RGB eða RGBA færslu leyfir þér að tilgreina ekki aðeins lit heldur einnig gagnsæi CSS bakgrunni, en aðferðin virkar bara í IE útgáfum eldri en 9. Aðrir vafrar viðurkenna eðlilega útgáfa með gagnsæi. Samkvæmt W3C staðla er æskilegt að nota enn RGBA í staðinn fyrir meiri venjulegum RGB.

Síðasta gildi í RGBA bakgrunni og setur ógagnsæi frá 0 (gegnsætt) til 1 (ógagnsæ).

Það eru nokkur óvenjuleg gildi. Bakgrunnur litur er hægt að stilla með HSL og HSLA. Bæði var bætt við CSS3, og því eru ekki studd af IE útgáfa 9 eða hærri. Útfærslur eins RGB eða RGBA, aðeins í öðru formi: Hue (skugga - gildið á litinn hjól, er gefin upp í gráðum), metta (mettun - Litstyrkur upp sem hundraðshluti, frá 0 til 100), Ljósleiki (léttleika - birta, mælt á sama hátt Mæliþáttur metta ).

Eigindi background-image

The kross-vafranum útgáfa af gagnsæjum bakgrunni - þetta er að nota myndina. Í CSS3 getur þú stillt enn fleiri myndum, þetta er gert í gegnum kommu. dæmi:

{Background-líkamsímynd: url (bg1.png), url (bg2.png)}.

Þessi leið að styðja enn IE8. Nokkrar myndir í bakgrunni gúmmí sem notað er í útliti. Ekki síst, ekki gleyma að nota hvaða mynd og setja bakgrunnslit í CSS, eins og notandi geta einfaldlega hlaða upp mynd.

Eigindi background-stöðu

Ef þú notar myndina til að stilla bakgrunninn eining, CSS er hægt að staðsetja myndina hvar sem er á skjánum. Sjálfgefið er að myndin er staðsett í efra vinstra horninu. Eiginleiki tekur annaðhvort munnleg fyrirmæli (efst, neðst, til vinstri, hægri), töluleg (vexti, dílar og aðrar einingar). Í þessu tilfelli verður þú að tilgreina tvö gildi, lárétt og lóðrétt:

líkami {background-stöðu: hægri miðju ;} - í þessu dæmi, mynstur verður staðsett á hægri hlið síðunnar, efst og neðst á fjarlægð mynd til sömu.

Eigindi background-stærð

Stundum er nauðsynlegt að teygja CSS bakgrunnur eða draga úr stærð hennar. Til að gera þetta, nota eiginleiki background-stærð, og stærð bakgrunni má setja í punkta eða hundraðshlutum, og allar aðrar einingar.

Með þessum eiginleika, það eru nokkur vandamál: að rétta skjá bakgrunn í fyrri útgáfum af vafra forskeytum á að nota. Að sjálfsögðu er núverandi útgáfa styður að fullu þessa eiginleika og þörf fyrir ákveðin eiginleika hvarf.

Eigindi background-attachment

Þessi eiginleiki skilgreinir hegðun bakgrunnsmyndir meðan að fletta. Svo, það getur tekið 3 gildin (ekki þar á meðal eignar, allra fyrir alla þá eiginleika fjallað er um í þessari grein):

• fast - gerir myndin á bakgrunni fastur;
• skrunaðu - bakgrunnur rolla með the hvíla af the frumefni;
• sveitarfélaga - myndin á bakgrunni er skrunað ef rolla er efni. Bakgrunnur sem fer út fyrir innihald ramma.

Dæmi um notkun:

líkama {background-attachment fast}.

Eins og er, Firefox styður ekki síðasta eign (staðbundið).

Eigindi background-uppruna

Þessi eiginleiki er ábyrgur fyrir Positioning frumefni. Snemma vafrar þurfa að nota forskeyti. Eign sjálft hefur þrjú breytur:

• padding-kassi er staðsettur miðað við brún mynstri, að teknu tilliti til þykkt við rammann;
• border-kassi eignir frábrugðið fyrri því að mörkin lína getur verið alveg eða að hluta skarast mynstur;
• Innihald-kassi staða myndin pryavyazyvaya efni hennar.

Ef þú tilgreinir mörg gildi, þá vafrar geta brugðist á sinn hátt: Firefox og Opera skynja aðeins fyrsta valkost.

Eigindi background-endurtaka

Sem reglu, ef bakgrunnsmynd er tilgreint, það verður að endurtaka lárétt eða lóðrétt. Fyrir þetta og notaði eigindi background-endurtaka. Þannig blokk bakgrunnur, CSS sem inniheldur slíka eign getur haft einn af nokkrum þáttum:

• enginn endurtaka - myndin birtist á síðunni í einni útgáfu;
• endurtaka - bakgrunnur er endurtekin í x og y;
• endurtakið-x - aðeins lárétt;
• endurtekna y - aðeins lóðrétt;
• rými - bakgrunnur er endurtekin, en ef pláss er ómögulegt að fylla í milli mynda tóm;
• umferð - myndin er minnkuð, ef það er ekki fylla allt svæðið af heilum myndum.

Dæmi um þeim einkennum:

líkama {background-endurtaka: moifólin með endurteknum með endurteknum} - svipað background-endurtaka: endurtaka-y.

Í CSS3 getur tilgreint gildi fyrir margar myndir þegar skráningar breytur, aðskilin með kommum.

Eigindi background-myndband

Þessi eiginleiki skilgreinir hegðun bakgrunni undir mörkum (t.d., að því er varðar dotted römmum):

• padding-kassi - bakgrunnur birtist í innréttinguna blokk;
• border-kassi - myndin kemur undir ramma;
• Innihald-kassi - myndin á bakgrunni mun aðeins birtast í innihald.

Dæmi um notkun:

líkama {background-bút: Content- kassi;}.

Chrom og Safari þurfa -webkit- forskeyti.

Ógagnsæi eiginleika og sía

Ógagnsæi eiginleiki gerir þér kleift að stilla gagnsæi bakgrunni - CSS eign mun vinna í öllum vöfrum. Gildið er stillt á bilinu frá 0,0 til 1,0 að báðum meðtöldum. Í þessu tilviki getur þú stillt gagnsæi CSS bakgrunni engin heiltala gildi í stað 0,3 er nóg að skrifa .3:

.block {background-image: url ( img.png); hulu: 0,3;}.

Til að stilla bakgrunninn ógagnsæi, CSS hentar jafnvel fyrir IE neðan níundu útgáfu, nota síu eigindi:

.block {background-image: url ( img.png); síu: alfa (ógagnsæi = 30)}.

Í þessu tilviki, ógagnsæi gildið er stillt á milli 0 og 100. Athugið að ógagnsæi eiginleiki mismunandi stillingar gagnsæi um RGBA eignar þegar ógagnsæi verður ljóst ekki bara bakgrunnur, heldur einnig allir þættir innan einingarinnar.

Alltaf að fylgjast með notkun tölfræði um CIS vöfrum og öllum öðrum löndum. Stærsta vandamálið af öllum DTP - eldri útgáfur af IE, þeir leyfa þér ekki að nota til hlítar CSS3. Í skipulag ekki gleyma að nota sérstaka þjónustu sem athuga hvort vafrinn þinn styður hvaða CSS eign. Ef þú getur ekki sett eldri útgáfur af vöfrum, finna þjónustu sem mun athuga síðuna vinnu í mörgum vöfrum netinu.