CSS priehľadnosť pozadia. Priehľadné pozadie alebo text s CSS

S nástupom CSS3 web dizajnérov pracovať v mnohých ohľadoch sa stala jednoduchšie a logickejšie: po tom všetkom, si teraz môžete skutočne flexibilne prispôsobiť akýkoľvek predmet, menej často sa uchyľovať k JavaScriptu. Povedzme, že je potrebné nastaviť priehľadnosť pozadia - CSS okamžite ponúka niekoľko možností.

Pozadie definovaných súborom atribútov (pozadia-obrázka, pozadia-polohe , pozadia veľkosti, pozadia-repeat, pozadia, pripojovacie, pozadia-pôvodu, pozadia-klip, background-color), z ktorých každá môže byť priradené samostatne alebo v kombinácii v atribúte pozadia. Pozrime sa každý z nich podrobnejšie.

Atribút background-color

CSS, farbu pozadia možno nastaviť v niekoľkými spôsobmi: pomocou hexadecimálny kód, názov farby alebo RGB vstupu. V CSS3 bolo možné použiť voľbu RGB, nahrávanie s RGBA miesto.

Hex farebný kód je zaznamenaný vo vlastnosti po mriežke: background-color: # FFDAB9. Pokiaľ postavy v tejto položke sú rovnaké dvojice, kód je zvyčajne malý rez: # ccff00 môže byť zapísaný ako # CF0:

body {background-color: # cf0 ;}.

Meno znamená, že 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á; }.

Druhá možnosť je RGB alebo vstup RGBA umožňuje určiť nielen farbu, ale aj transparentnosť CSS pozadie, ale táto metóda funguje len vo verziách IE starších ako 9. Ostatné prehliadače rozpoznať normálnu verziu s priehľadnosťou. Podľa W3C štandardov je výhodné použiť ešte RGBA namiesto obvyklejšie RGB.

Posledná hodnota v RGBA pozadí a nastaví nepriehľadnosti od 0 (priehľadná) do 1 (nepriehľadná).

Tam sú niektoré neobvyklé hodnoty. Farbu pozadia možno nastaviť pomocou HSL a HSLA. Obaja boli pridané do CSS3, a preto nie sú podporované IE verzie 9 alebo vyššej. Prevedenie identické RGB alebo RGBA, len v inom formáte: Odtieň (odtieň - hodnota na farebnom bicykli, je uvedená v stupňoch), Saturate (saturácie - intenzita farby v percentách, od 0 do 100), svetlosť (ľahkosť - jas, merané obdobným parameter nasýtenia ).

Atribút background-image

Najväčší verzia cross-browser priehľadné pozadie - to je použitie obrazu. V CSS3, môžete nastaviť aj viac snímok, to sa vykonáva pomocou čiarkou. príklad:

{Background-obraz tela: url (bg1.png), url (bg2.png)}.

Tento spôsob podpory aj IE8. Niekoľko obrázkov na pozadí kaučuku použitého v rozvrhnutie. Dôležité je, nezabudnite použiť ľubovoľný obrázok a nastaviť farbu pozadia v CSS, pretože používatelia môžu jednoducho nahrať obrázok.

Atribút background-position

Ak používate snímku nastaviť pozadie jednotky v CSS umožňuje umiestniť obraz kdekoľvek na obrazovke. Štandardne je obraz sa nachádza v ľavom hornom rohu. Atribút sa buď slovné pokyny (hore, dole, vľavo, vpravo), číselné (úroky, pixely a ďalších jednotiek). V tomto prípade je nutné zadať dve hodnoty, horizontálne a vertikálne:

body {background-poloha: priamo centrum ;} - v tomto príklade je vzor sa nachádza na pravej strane stránky, hornej a spodnej časti obrazu vzdialenosti rovnaké.

Atribút background-size

Niekedy je nutné natiahnuť CSS pozadie alebo znížiť jeho veľkosť. Ak to chcete urobiť, použite atribút pozadia veľkosti a veľkosti pozadia je možné nastaviť v pixeloch alebo v percentách, a všetky ostatné jednotky.

S týmto atribútom, tam sú niektoré problémy: pre správne zobrazenie pozadie v predchádzajúcich verziách predpôn prehliadače, ktoré majú byť použité. Samozrejme, že súčasná verzia plne podporuje tento atribút a potreba špecifických vlastností zmizol.

Atribút background-attachment

Tento atribút určuje správanie obrázkov na pozadí, zatiaľ čo posúvanie. Takže to môže trvať 3 hodnôt (nie vrátane zdediť úhrne za všetky atribúty popisované v tomto článku):

• pevná - robí obrázok na pozadí pevne;
• rolovanie - pozadie zvitky so zvyškom prvkov;
• Miestne - obrázok na pozadí sa posunie v prípade posúvanie má obsah. Doterajší stav techniky, ktorý presahuje obsah rámu je pevná.

Príklad použitia:

body {background-attachment pevné}.

V súčasnej dobe, Firefox nepodporuje posledná vlastnosť (lokálne).

Atribút background-pôvodu

Tento atribút je zodpovedný za polohovacieho prvku. Rané prehliadačov vyžadujú použitie predpôn. Samotná nehnuteľnosť má tri parametre:

• padding-box je umiestnený vzhľadom k okraju vzorky, pričom s ohľadom na hrúbku rámu;
• border-box vlastnosti odlišné od predchádzajúceho tým, že hraničná čiara môže byť úplne alebo čiastočne prekrývajú vzor;
• Obsah-box umiestnenie obrazu pryavyazyvaya jeho obsah.

Ak zadáte viac hodnôt, potom prehliadača môžu reagovať vlastným spôsobom: Firefox a Opera vnímať len prvú možnosť.

Atribút background-repeat

Spravidla, ak je zadaný obrázok na pozadí, to sa musí opakovať horizontálne alebo vertikálne. Za týmto účelom a použitý atribút background-repeat. Preto blok pozadia, CSS, ktorý obsahuje také vlastnosti môže mať jednu z niekoľkých parametroch:

• no-repeat - zobrazí obraz na stránke v jednom vyhotovení;
• opakujem - pozadie sa opakuje v x a y;
• repeat-x - iba horizontálne;
• repeat-y - len vo zvislom smere;
• space - na pozadí sa opakuje, ale ak priestor je možné vyplniť medzi obrázkami sa objaví prázdny;
• kolo - obraz je zmenšený, ak nevypĺňa celú plochu celých snímok.

Príklad atribútov:

body {background-repeat: NO- Opakované} - podobne ako pozadie-repeat: repeat-y.

V CSS3 môže stanoviť hodnoty pre viac snímok pri výpočte parametrov oddelené čiarkou.

Atribút background-klip

Tento atribút definuje správanie pozadí pod hranicami (napr., V prípade, že bodkované rámčeky):

• padding-box - pozadie zobrazená vo vnútri bloku;
• border-box - obraz patrí do rámca;
• content-box - obrázok na pozadí sa objaví len v rámci obsahu.

Príklad použitia:

body {background-clip: obsahového škatule;}.

Chróm a Safari vyžadujú -webkit- prefix.

atribúty krytia a filter

atribút nepriehľadnosť umožňuje nastaviť priehľadnosť pozadia - vlastnosť CSS bude fungovať vo všetkých prehliadačoch. Táto hodnota je nastavená v rozsahu od 0,0 do 1,0 vrátane. V tomto prípade môžete nastaviť priehľadnosť pozadia CSS nie celé číslo, miesto 0,3 dosť písať .3:

.block {background-image: url ( img.PNG); Nepriehľadnosť: 0,3;}.

Na nastavenie pozadia krytie, CSS je vhodný aj pre IE pod deviatej verzie, použite atribút filtra:

.block {background-image: url ( img.PNG); Filter: alfa (opacity = 30)}.

V tomto prípade je hodnota nepriehľadnosť je nastavená medzi 0 a 100. Všimnite si, že nepriehľadnosť prisudzujú rôzne nastavenia priehľadnosti prostredníctvom dedičnosti RGBA: Pri použití krytia zrejmé nielen zázemie, ale aj všetky prvky vnútri prístroja.

Vždy sledovať vaše štatistiky využitie pre prehliadače CIS a všetkých ostatných krajín. Najväčším problémom všetkých DTP - staršie verzie IE, ktoré nedovoľujú použiť v plnom rozsahu CSS3. V rozložení nezabudnite použiť špeciálne služby, ktoré kontrolujú, či váš prehliadač podporuje všetky vlastnosti CSS. Ak nemôžete nainštalovať staršie verzie prehliadačov, nájsť službu, ktorá bude kontrolovať, či web prácu v rôznych prehliadačoch online.