S príchodom CSS3 DTP práce v mnohých ohľadoch sa stala jednoduchšie a logickejšie: po tom všetkom, si teraz môžete urobiť pre flexibilné konfiguráciu objektu, vzácnejšie sa uchyľovať k JavaScriptu.Povedzme, že je potrebné nastaviť priehľadnosť pozadia - CSS okamžite ponúka niekoľko možností.
pozadí definované sadou atribútov (background-image, background-position, pozadia veľkosti, background-opakovanie, background-upevňovacími, background-pôvodu, background-klip, background-color), z ktorých každá môže byť predpísaný samostatne alebozjednotiť pod rovnakým atribútu pozadí.Pozrime sa každý z nich podrobnejšie.
atribútu background-color
v CSS, farbu pozadia je možné nastaviť v niekoľkých spôsobmi: pomocou hexadecimálny kód, názov farby alebo RGB vstupu.V CSS3 to stalo sa možné využiť možnosť RGB, nahrávanie s RGBA miesto.
kód hex farba je napísané v majetku po mriežke: background-color: # FFDAB9.Ak postavy vo dvojiciach zodpovedajú taký záznam, kód je zvyčajne malý rez: # ccff00 môže byť zapísaný ako # CF0:
body {background-color: # CF0;}.
meno tam, a to aj v tých exotických farbách.Napríklad, okrem štandardnej červenej a bielej, môžete použiť NavajoWhite (#FFDEAD) alebo Honeydew2 (# E0EEE0):
body {background-color: fialová;}.
posledná možnosť RGB alebo RGBA záznam umožňuje určiť nielen farbu, ale aj transparentnosť pozadie CSS, ale aj spôsob, ako pracovať v IE 9 iba staršie verzie.Ostatné prehliadače rozpoznať normálne variant s transparentnosťou.Podľa štandardov W3C, že je výhodné použiť všetky rovnaké RGBA namiesto obvyklejšie RGB.
Posledná hodnota na RGBA nastavuje nepriehľadnosť pozadia a od 0 (priehľadná) do 1 (nepriehľadná).
Tam sú niektoré neobvyklé hodnoty.Farba pozadia môže byť zadaný pomocou HSL a HSLA.Oba boli pridané v CSS3, a preto nie sú podporované IE verzie 9 alebo vyššej.Možnosti sú rovnaké ako na RGB alebo RGBA, len v inom formáte: Odtieň (odtieň - hodnota na farebnom bicykli, je uvedený v stupňoch), Saturate (saturácia - intenzita farby v percentách od 0 do 100), svetlosť (ľahkosť - jas, merané podobne parameter saturovať).
atribútu background-image
väčšina cross-browser verzia priehľadným pozadím - je použitie obrazu.V CSS3, môžete zadať ešte viac snímok, je to robené cez čiarkou.Príklad:
body {background-image: url (bg1.png), url (bg2.png)}.
podporuje túto aj IE8.Niekoľko obrázkov ako pozadie použité v usporiadaní gumy.Dôležité je, nezabudnite použiť akýkoľvek obrázok ako v nastavení farby pozadia CSS, pretože používatelia môžu jednoducho nahrať obrázok.
atribútu background-position
Pokiaľ použiť obrázok definovať blok pozadia, CSS vám umožňuje umiestniť obraz kdekoľvek na obrazovke.Štandardne je obraz sa nachádza v ľavom hornom rohu.Atribútov prijímať žiadne slovné pokyny (hore, dole, vľavo, vpravo), alebo numerickej (úroky, pixelov a ďalšie jednotky).Je potrebné určiť dve hodnoty pre horizontálne a vertikálne:
body {background-position: vpravo uprostred;} - v tomto prípade, bude pozadie sa nachádza na pravej strane stránky, sa horný a dolný vzdialenosti obrazu sú rovnaké.
atribútu background-veľkosť
Niekedy je potrebné použiť CSS natiahnuť pozadie alebo znížiť jeho veľkosť.Pre tento účel, atribút pozadia veľkosti, a veľkosť môže byť definovaný ako body pozadie alebo v percentách, alebo v akejkoľvek inej jednotke.
S týmto atribútom, tam sú niektoré problémy: pre správne zobrazenie pozadia v starších prehliadačoch musíte použiť prefix.Samozrejme, že aktuálna verzia plne podporujú tento atribút a potrebu špecifické vlastnosti zmizol.
atribútu background-attachment
Tento atribút určuje správanie obrázku na pozadí pri posúvaní.Napríklad, to môže trvať 3 hodnoty (okrem dostaneš, pre celkový súčet všetkých atribútov v tomto článku):
- fixné - robí obrázok na pozadí pevné;
- scroll - posúva na pozadí so zvyškom prvkov;
- miestnej - obrázok na pozadí sa posúva, ak posúvania je spokojný.Background, ktorý ide nad rámec obsahu je pevná.
Príklad použitia:
body {background-attachment fixné}.
V súčasnej dobe, Firefox nepodporuje najnovšie vlastnosti (miestne).
atribút background-pôvodu
Tento atribút je zodpovedný za umiestnenie prvku.Prehliadače staršie verzie vyžadujú použitie predpôn.Vlastnosť sám má tri parametre:
- padding-box pozícií z okraja na pozadí, pričom s ohľadom na hrúbku rámu;
- border-box vlastnosti odlišné od predchádzajúceho v tom, že hraničná čiara môže byť úplne alebo čiastočne pokryť pozadia;
- content-box umiestnenie image pryavyazyvaya jeho obsah.
zadáte viac hodnôt, prehliadač môže reagovať na ich vlastným spôsobom: Firefox a Opera prijať len prvú možnosť.
atribútu background-repeat
Spravidla, keď je špecifikovaná obrázok na pozadí, musí sa zopakovať horizontálne alebo vertikálne.Z tohto a použitý atribút background-repeat.Tak, blok pozadia, CSS, ktorá obsahuje takú vlastnosť môže mať jednu z niekoľkých možností:
- no-repeat - obrázok sa zobrazí na stránke v jednej forme;
- repeat - vzor opakuje v x a y;
- repeat-x - iba vodorovne;
- repeat-y - len vo zvislom smere;
- priestor - vzor sa opakuje, ale ak priestor je vyplnený nie je, potom tam sú prázdne priestory medzi obrazmi;
- kolo - obraz je meradlo, ak sa nevyplní celú plochu celej snímky.
Príklad atribútu:
body {background-repeat: no-repeat repeat} - podobne background-repeat: repeat-y.
V CSS3 môže stanoviť hodnoty pre viac snímok v prípade, že parametre prenosu oddelené čiarkami.
atribút background-klipu
Tento atribút určuje správanie pozadí pod hranicami (napríklad, v prípade, že bodkovaného rámov):
- padding-box - pozadie zobrazená vo vnútornej časti bloku;
- border-box - spadá do pôsobnosti tohto obrazu;
- obsahu-box - obrázok na pozadí sa objaví len v rámci obsahu.
Príklad použitia:
body {background-clip: content-box;}.
Chróm a Safari vyžadujú použitie predpony -webkit-.
atribút nepriehľadnosť a filtrovať
atribút krytie umožňuje nastaviť priehľadnosť pozadia - CSS vlastnosť bude fungovať vo všetkých prehliadačoch.Hodnota je nastaviteľná od 0,0 do 1,0 vrátane.S týmto môžete nastaviť priehľadnosť pozadia CSS bez celočíselnú hodnotu namiesto 0,3 stačí napísať .3:
.block {background-image: url (img.PNG);opacity: 0,3;}.
Ak chcete nastaviť priehľadnosť pozadia, CSS je vhodný aj pre IE pod deviatej verzie, použite atribút filter:
.block {background-image: url (img.PNG);Filter: alpha (opacity = 30);}.
V tomto prípade je nepriehľadnosť je nastavená medzi 0 a 100. Všimnite si, že nepriehľadnosť atribút rôzne nastavenia priehľadnosti cez RGBA dedičnosti: nepriehľadnosť pomocou priehľadné pozadie je nielen, ale aj všetky položky vo vnútri jednotky.
Vždy sa uistite, štatistika využitie prehliadač SNS a všetky ostatné krajiny.Najväčším problémom všetkých DTP - staršie verzie IE, neumožňujú plne využívať CSS3.Ak rozvrhnutie nezabudnite použiť špeciálne služby, ktoré kontrolujú, či váš prehliadač je vlastnosť CSS.Ak nemôžete nainštalovať staršie verzie prehliadačov, získate službu, ktorá kontroluje prevádzku webu v rôznych prehliadačoch online.
