CSS fonas skaidrumas. Skaidrus fonas arba teksto su CSS

Su CSS3 web dizainerių atėjimas dirbti įvairiais būdais tapo lengviau ir logiška: juk dabar galite tikrai lanksčiai pritaikyti bet kokio objekto, rečiau griebiasi JavaScript. Tarkime, jums reikia reguliuoti fono skaidrumą - CSS iškart siūlo keletą variantų.

Fono apibrėžta pagal atributų rinkinys (background-image, background-Position , fono dydžio, fonas-repeat, background-tvirtinimo, fonas-kilmę, fonas-CLIP, background-color), kurių kiekvienas gali būti priskirtos atskirai arba kartu pagal atributo fonas. Panagrinėkime kiekvieną iš jų detaliau.

Įgūdis background-color

CSS, fono spalva gali būti nustatytas keliais būdais: naudojant hex kodą, spalva vardas arba RGB įrašo. Be CSS3 tapo įmanoma naudoti vietoj RGB įrašymo galimybe su diodas.

HEX spalvos kodas įrašomas į nuosavybę po grotelių: background-color: # FFDAB9. Jei į šį įrašą simboliai yra tie patys poros, kodas paprastai yra šiek tiek supjaustyti: # ccff00 gali būti parašytas kaip # cf0:

kūno {background-spalva: # cf0 ;}.

Pavadinimas yra, net labiausiai egzotinių spalvų. Pavyzdžiui, be standartinio raudona ir balta galima naudoti NavajoWhite (#FFDEAD) arba Honeydew2 (# E0EEE0):

kūno {background-spalva: raudonos; }.

Pastarasis variantas yra RGB arba RGBA įrašas leidžia jums nurodyti ne tik spalvą, bet ir CSS fono skaidrumą, bet šis metodas veikia tik IE versijų vyresniems nei 9. Kitos naršyklės atpažinti normalią versiją su skaidrumo. Pagal W3C standartus tai geriau naudoti dar RGBA vietoj labiau įprasta RGB.

Paskutinis vertė Tipinis RGBA fone ir rinkiniai opacity nuo 0 (skaidrus) iki 1 (matinis).

Yra keletas neįprastų vertės. Fono spalva gali būti nustatytas naudojant HSL ir HSLA. Abu buvo įtraukta į CSS3, todėl yra nepalaikomas 9 arba didesnis IE versija. Įgyvendinimo variantai identiški RGB arba RGBA, tik kitokiu formatu: Huė (atspalvį - vertė ant spalvų rato, yra suteiktas laipsniais), sočiųjų (sočiųjų - spalvos intensyvumas procentais, nuo 0 iki 100), Lengvumas (lengvumas - ryškumas, matuojamas panašiai parametras sočiųjų ).

Įgūdis background-image

Patys kryžminio naršyklės versija skaidriai fone - tai iš paveikslėlio panaudojimas. Be CSS3, galite nustatyti dar daugiau vaizdų, tai daroma per kableliais. pavyzdys:

{Background-kūno vaizdas: URL (bg1.png), URL (bg2.png)}.

Šis remti net IE8 būdas. Keletas vaizdus iš gumos, naudojamos išdėstymo fone. Svarbu, nepamirškite naudoti bet kokį vaizdą ir nustatyti fono spalvą CSS, kaip vartotojai gali tiesiog įkelti vaizdą.

Įgūdis background-poziciją

Jei naudojate atvaizdą nustatyti fono vienetas, CSS leidžia poziciją vaizdą bet kurioje ekrano vietoje. Numatyta, kad vaizdas yra viršutiniame kairiajame kampe. Įgūdis Priima vieną žodines instrukcijas (viršuje, apačioje, kairėje, dešinėje), skaičiais (palūkanos, taškų ir kitų vienetų). Tokiu atveju turite nurodyti dvi vertės, horizontalius ir vertikalius:

kūno {background-pozicija: teisę centras ;} - šiame pavyzdyje, modelis bus yra dešinėje pusėje puslapio, viršuje ir apačioje vaizdo toli į tą patį.

Įgūdis background-dydis

Kartais būtina ištempti CSS foną arba sumažinti jos dydį. Norėdami tai padaryti, naudokite atributas fono dydžio, o fone galima nustatyti pikselių ar procentais dydį ir kitų vienetų.

Su šio požymio, yra keletas problemų, nes turi būti naudojami teisingai ekranas iš į ankstesnių versijų naršyklės priešdėlių fone. Žinoma, dabartinė versija pilnai palaiko šį atributą ir specifinių savybių reikia išnyko.

Įgūdis background-areštas

Šis atributas nurodomas fono vaizdus, o przewijanie elgesys. Taigi, ji gali imtis 3 vertes (neįskaitant paveldėti, už visus požymius aprašytus šiame straipsnyje iš viso):

• fiksuoto - daro, vaizdas fiksuoto fone;
• pereikite - fono Scrolls su elementų poilsio;
• vietos - vaizdas fone yra slinks, jei slinkimo turi turinį. Aplinkybės, kad peržengia rėmo turinį yra fiksuota.

Pavyzdys naudoti:

kūno {background-pakabinimo fiksuoto}.

Šiuo metu "Firefox nepalaiko paskutinį turtą (vietinis).

Įgūdis background-kilmę

Šis atributas yra atsakinga už pozicionavimo elementas. Ankstyvi naršyklės reikalauja priešdėlių naudojimą. Pati nuosavybė turi tris parametrus:

• apdaila-dėžutė yra išdėstyti, palyginti su kontūrą, o atsižvelgiant į rėmo storis;
• sienos-dėžutė savybės skiriasi nuo ankstesnių tuo, kad kontūro linija gali būti visiškai arba iš dalies sutampa modelis;
• turinio dėžutė padėties vaizdo pryavyazyvaya jo turinį.

Jei nurodysite keletą reikšmių, tada naršyklių gali reaguoti savaip: "Firefox" ir "Opera suvokia tik pirmąjį variantą.

Įgūdis background-repeat

Kaip taisyklė, jei fono paveikslėlį yra nurodytas, jis turi būti kartojamas horizontaliai arba vertikaliai. Dėl šios ir atributas background-repeat. Taigi, blokas fonas, CSS, kuris yra toks turtas gali turėti vieną iš kelių parametrų:

• ne-Pakartokite - vaizdas atrodo ant į vieną versiją puslapyje;
• pakartoti - fono pakartota x ir y;
• pakartoti-x - tik horizontaliai;
• pakartoti-Y - tik vertikaliai;
• plotas - fonas kartojasi, bet jei erdvė yra neįmanoma užpildyti tarp paveikslėlių rodomas tuščias;
• apvalus - vaizdas mastelis, jei ji neturi užpildyti visą plotą visos nuotraukos.

Pavyzdys požymius:

kūno {fono-pakartojimas: N-O- pakartoti pakartoti} - panašių fono-pakartojimas: pakartoti-Y.

Be CSS3 gali nurodyti vertes daugelio vaizdų, kai išvardyti parametrai, atskirdami juos kableliais.

Priskirti fono-įrašą

Šis atributas apibrėžia fone pagal ribas elgesys (pvz, į punktyrinės rėmeliai atveju):

• padding-dėžutė - fone rodomas bloko vidų;
• sienos dėžė - vaizdas patenka į sistemą;
• turinio langas - nuotraukos fone bus rodomas tik per turinį.

Pavyzdys naudoti:

kūno {background-įrašas: Content- dėžės;}.

Chrom "ir" Safari reikalauja -webkit- prefiksą.

Neskaidrumas atributai ir filtras

neskaidrumo požymis leidžia nustatyti fono skaidrumą - CSS nuosavybė dirbs visose naršyklėse. Vertė nustatyta diapazone nuo 0,0 iki 1,0 imtinai. Tokiu atveju, galite nustatyti CSS fono skaidrumą ne sveikas skaičius vertė, o ne 0,3 yra pakankamai rašyti .3:

.block {background-vaizdas: URL ( img.png); drumstumas: 0,3;}.

Norėdami nustatyti fono opacity, CSS tinka net žemiau devintą versija IE, naudokite filtrą atributą:

.block {background-vaizdas: URL ( img.png); filtras: alfa (drumstumas = 30)}.

Šiuo atveju neskaidrumo vertė yra tarp 0 ir 100. Atkreipkite dėmesį, kad neskaidrumo požymis skirtingus skaidrumo nustatymus per Tipinis RGBA palikimo: naudojant neskaidrumo tampa aišku, ne tik fonas, bet ir visos vieneto viduje elementai.

Visada stebėti savo naudojimo statistiką NVS naršyklių ir visose kitose šalyse. Didžiausia problema visų DTP - senesnės versijos IE, jie neleidžia jums naudoti visa apimtimi css3. Išdėstymu nepamirškite naudoti specialias paslaugas, kad patikrinti, ar jūsų naršyklė palaiko bet kokį CSS turtą. Jei negalite įdiegti senesnės versijos naršyklių, rasti tarnybą, kuri bus patikrinti svetainės darbą keliomis naršyklėmis internete.